This rule triggers when SiteGrasp detects that your page does not specify a viewport, or specifies a viewport that does not adapt to different devices.
Overview
A viewport controls how a webpage is displayed on a mobile device. Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. Setting a viewport gives control over the page's width and scaling on different devices.
Recommendations
Pages optimized to display well on mobile devices should include a meta viewport in the head of the document specifying width=device-width, initial-scale=1.
<meta name=viewport content="width=device-width, initial-scale=1">
Additional information
Terms:
- Hardware pixel: A physical pixel on the display. For example, an iPhone 5 has a screen with 640 horizontal hardware pixels.
- Device-independent pixel (dip): A scaling of device pixels to match a uniform reference pixel at a normal viewing distance, which should be approximately the same size on all devices. An iPhone 5 is 320 dips wide.
- CSS pixel: The unit used for page layout controlled by the viewport. Pixel dimensions in styles such as
width: 100pxare specified in CSS pixels. The ratio of CSS pixels to device independent pixels is the page's scale factor, or zoom.
Desktop Pages on Mobile Devices
When a page does not specify a viewport, mobile browsers will render that page at a fallback width ranging from 800 to 1024 CSS pixels. The page scale factor is adjusted so that the page fits on the display, forcing users to zoom before they can interact with the page.
Meta Viewport Tag
A meta viewport tag gives the browser instructions on how to control the page's dimensions and scaling, and should be included in the document's head.
Fixed-Width Viewport
The viewport can be set to a specific width, such as width=320 or width=1024. While discouraged, this can be a useful stopgap to ensure pages with fixed dimensions display as expected.
Responsive Viewport
Using the meta viewport value width=device-width instructs the page to match the screen's width in device independent pixels. This allows the page to reflow content to match different screen sizes.
Some browsers, including iOS and Windows Phone, will keep the page's width constant when rotating to landscape mode, and zoom rather than reflow to fill the screen. Adding the attribute initial-scale=1 instructs browsers to establish a 1:1 relationship between CSS pixels and device independent pixels regardless of device orientation, and allows the page to take advantage of the full landscape width.
width=device-width, resulting in a landscape width of 320px.
width=device-width, initial-scale=1, resulting in a landscape width of 568px.Pages must be designed to work at different widths to use a responsive viewport. See our recommendations for sizing content to the viewport for advice.
Other Considerations
Avoid minimum-scale, maximum-scale, user-scalable
It is possible to set the minimum and maximum zoom, or disable the user's ability to zoom the viewport entirely. These options negatively impact accessibility and should generally be avoided.
@viewport
The meta viewport tag, while broadly supported, is not part of a formal standard. This behavior is being included in CSS as part of the CSS Device Adaptation specification. Until this specification is finalized and widely implemented, authors should continue to use the meta viewport tag for compatibility, either alone or with corresponding @viewport styles.
Resources:
- Configuring the Viewport in the Safari Web Content Guide.
- Quirksmode "A Tale of Two Viewports", parts one and two.
- A Pixel Identity Crisis from A List Apart.
- Viewport documentation from Opera, Mozilla.
- Creating a Mobile-First Responsive Web Design from HTML5 Rocks.
