Content: Fluid layout, requirements for mobile web development, and an introduction to the viewport.
Fluid Layout
A fluid layout, also known as a percentage-based layout, adjusts its elements based on the screen’s width by setting the width of containers in percentages. This approach allows content to expand and contract, adapting to different screen sizes without being limited by fixed pixel dimensions.
Requirements for Standard Mobile Development:
- Horizontal scrolling should be avoided. The webpage’s width, or viewport, should match the browser’s width.
- The scaling ratio should be consistent with the PC version.
- User-initiated scaling should be disabled.
Introduction to the Viewport
About the Viewport
- In the context of mobile devices, the viewport refers to the area where a webpage is displayed—it’s our visual window.
- The viewport can be configured with width and height settings, allowing proportional zooming and control over user-initiated scaling.
Viewport Properties
Property | Description | Values |
---|---|---|
width | Sets the viewport’s width, default unit is px | Numeric, device-width |
height | Sets the viewport’s height, default unit is px | Same as above |
initial-scale | Default initial zoom scale | Numeric |
user-scalable | Enables or disables user-initiated scaling | no, yes (default), 0, 1 |
maximum-scale | Maximum allowed zoom scale | Numeric |
minimum-scale | Minimum allowed zoom scale | Numeric |
Using the Viewport
1 | <head> |