Prepping a Document for Mobile

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

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…

Enable Cleartype on IE Mobile

Other Head Content

Device Icons

 

Great information on this topic located here….http://mathiasbynens.be/notes/touch-icons

Metatags for iOS

To hide browser chrome in iOS.