Mobile Related Meta Tags
The viewport metatag
By default most modern handheld devices will try and render a webpage at its original width. This default is due to the fact that even today most sites a user will visit are not yet mobile optimized. So for example a standard web page might be render on a mobile device at 980px zoomed way out to to show the page in its entirety. Right out of the gate this forces mobile users to zoom in in order to use the page. The viewport metatag allows us to override that default behavior and even set the zoom level if we need to do so.
Example
- Test Case 1 (without viewport meta declared)
- Test Case 2 (with viewport meta declared)
Attributes
| Property | Description |
|---|---|
| width | Width of the viewport in pixels (or device-width). If width isn’t set, it defaults to a desktop size (980px on mobile Safari). |
| height | Height of the viewport in pixels (or device-height). Generally you don’t need to worry about setting this property. |
| initial-scale | (0 to 10.0) Multiplier that sets the scale of the page after its initial display. Safe bet: if you need to set it, set it to 1.0. Larger values = zoomed in, smaller values = zoomed out |
| minimum-scale | (0 to 10.0) The minimum multiplier the user can “zoom out” to. Defaults to 0.25 on mobile Safari. |
| maximum-scale | (0 to 10.0) The minimum multiplier the user can “zoom in” to. Defaults to 1.6 on mobile Safari. |
| user-scalable | (yes/no) Whether to allow a user from scaling in/out (zooming in/out). Default to “yes” on mobile Safari. |
Additional Device Support
For older devices we need to include these as well…
[crayon][/crayon]
[crayon][/crayon]
Enable Cleartype on IE Mobile
[crayon][/crayon]
Other Head Content
Device Icons
[crayon]
[/crayon]
Great information on this topic located here….http://mathiasbynens.be/notes/touch-icons
Metatags for iOS
To hide browser chrome in iOS.
[crayon]
[/crayon]