- Tip 1: Use 'Mobile First' Media Queries
- Tip 2: Support Older IE Versions with a Polyfill
- Tip 3: Use a Very Wide Header Image to Suit Multiple Screen Widths
- Tip 4: Use Viewport Meta Sparingly, and Let Users Zoom
- Tip 5: Serve Larger Images for High-Resolution Displays
- Tip 6: Avoid Using Images and Other Separate Asset Files
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Tip 4: Use Viewport Meta Sparingly, and Let Users Zoom
The most common use you'll have for the viewport meta tag (and later on, the CSS equivalent for CSS device adaptation) is to force mobile browsers to render sites at their real device width, rather than a fake "assumed" viewport width, which mobile browsers tend to use to make non-responsive sites look better when rendered. For this purpose, you'll use the following:
<meta name="viewport" content="width=device-width">
device-width makes the browser render the site at the physical width of the device. You could specify a number of pixels, such as 480, to set a certain rendering width, but this option might be less useful than simply using device-width. Often, this is all you'll need to do to get your media queries kicking in properly, therefore getting the rendering you want on mobile devices. But the viewport meta tag has other options, many of them concerned with controlling how the user zooms:
- initial-scale sets an initial scale for your content. initial-scale=1.5 means "zoom in by 50%."
- maximum-scale and minimum-scale control the maximum and minimum scale to which users can zoom in and zoom out, respectively.
- user-scalable=no completely turns off the user's ability to zoom.
Using maximum-scale, minimum-scale, and particularly user-scalable=no is a bad idea in most cases. Browser zoom functionality is a very important accessibility tool for many people, so you shouldn't take it away. The main case where you might want to limit zooming is in a very precise web app layout, in which case you should provide some kind of alternative zooming controls that work better for your particular situation.