When you're creating a mobile website one of the challenges comes from how new smartphones interpret the pages. These phones often have high resolution, but ultimately the screens are still small. So, you can create a design specifically for the smaller screen that is easier for mobile customers to access, and the smartphones seemingly ignore your media queries and display the large screen version instead.
What's Happening?
Most media queries are based on the width of the screen. And since Android and iPhone devices report the width based on the resolution of the device, you can end up with a difficult-to-read two-column layout when you were hoping to get a more mobile-friendly single column.
What You Can Do About It
Most web designers shrug at that point, and justify their decision to do nothing by saying that the screens have enough resolution to display the more complex layout so it's okay. But that is both lazy and not respectful of your customers. It's silly to go through the trouble of creating a version of your site for smaller-screen devices and then not set up your site to display them.
Luckily there is a meta tag that you can use on all your pages to ensure that the devices look the way you intend them to:
viewportWith this meta tag, you can override the default viewport to set a width that makes sense for your page. While you can set the width to an arbitrary number of pixels, it makes more sense to tell the browser to make the width of the page equal to the device width, without any scaling.
You do it like this:
<meta name="viewport" content="width=device-width"> You can also set the height of the viewport to the
device-height in the same way. Separate multiple values with a comma: <meta name="viewport" content="width=device-width, height=device-height"> But There Are Other Mobile Meta Tags
The
viewport meta tag is the most useful mobile meta tag, but there are several others you can add to your pages to help your mobile users.Helpful Mobile Meta Tags
| Tag | Description and Use | Example |
|---|---|---|
| mobileOptimized | In mobile devices that support it, this meta tag forces the layout to one column even if you've written it as more. | <meta name="mobileOptimized" content="width"> |
| handheldFriendly | This meta tag is used to define if a page itself is built for mobile pages. The content is true if it is mobile friendly and false if it isn't. | <meta name="handheldFriendly" content="true"> |
| viewport | As you learned above, this meta tag controls the scaling of the viewing area on mobile devices. | <meta name="viewport" content="width=device-width"> |
| apple-mobile-web-app-capable | This is an Apple meta tag that defines whether the web application should run in full-screen mode (yes) or not (no). | <meta name="apple-mobile-web-app-capable" content="yes"> |
| apple-mobile-web-app-status-bar-style | If you use the above meta tag to convert your app to full-screen mode, you can then use this tag to change the status bar (on iOS devices) to black or black-translucent. | <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> |
| format-detection | This meta tag will turn on or off the detection of data such as phone numbers. The default on iOS devices is telephone=yes. | <meta name="format-detection" content="telephone=no"> |