HTML5 Mobile Meta Tags

HTML5 Mobile Meta Tags

There are several <meta> tags that are specifically geared to mobile devices. Among them are <meta> tags that tell browsers to take up the entire view-port and disable scaling, and to change the status bar color, which we will cover in the following section.

View-port Meta Tag

On the desktop, unless you’ve expanded your browser window size beyond the bounds of your monitor, the viewport size is the size of the browser window. On most mobile devices, the scale of the page can be controlled, but the viewport size remains the same, determined by the size of the device’s screen.
The “viewport” <meta> tag allows us to dicate the logical dimensions and scaling of the browser viewport window on mobile.

Viewport <meta> tag is supported on all smartphones and all of the mobile devices. By setting the viewport width equal to device-width, we’re telling the browser to set the document width to the device width.

The view-port <meta> tag supports a comma-delimed list of the directives allowing us to dicate the width, scale, and heigh of the browser view-port. You can tell the browser to not allow scaling, ot to scale up to a maximum or down to a minimum value.

width=<num> | device-width

Generally, you’ll want to use the key term device-width to set the view-port width to the width of the device, though numeric values are also valid. The default calues differs by browser, but is generally around 980. The minimum value is 200, the maximum 10,000.

height=<num> | device-height

Set to device-height, or a value like 480 for an iPhone 4 or older, defines the view-port height. This calue is generally omitted in favor of using only width. For reference, the minimum value is 223.

user-scalable = no|yes

Determines whether or not the user can zoom in and out to change the scale of the view-port. Set to “YES” to allow scaling and “NO” to disallow scaling. The is yes. Setting to no also prevents scrolling on data entry. User scaling, if allowed, can be limited by the minimum-scale and maximum-scale properties of the view-port <meta>.

The default width rendered by most mobile browsers is 980px. By setting the width to device-width, the user does not need to zoom in on page load because you served them 980px width on a 320px device. We could have set the view-port width to 320 for 320 px instead of device-width, but then it would only work correctly on mobile devices of exactly 320px width. We are setting the width of the window to the width of the device, which optimal: it scales the page proportionally to the device without the author having to know the width of the device the user may be using.

However, this is not necessarily optimal for all websites, but rather just for mobile sites and mobile web applications. Then, when user-scalable is enabled the user can zoom in to make the page more legible for those who can’t read small print.

The function of the view-port <meta> tag really is presentation, and was never part of any specifications; rather, it’s a feature initiated by Apple. The specification to convert the functionality from HTML mark-up to CSS with @view-port is well under way, and os partially supported in IE10.