The viewport is the viewable area of the canvas. You can read more about the viewport in Apple's Safari Web Content Guide.
The <meta>
tag is supported in all major browsers and contains several useful properties when building mobile accessible web applications. Below is an example of common settings you can use in your mapping applications for a typical mobile optimized web application.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
The apple-mobile-web-app-capable
sets whether or not the application can run in full-screen mode. Full-screen mode, or stand-alone mode, is when the user adds the web application to their home screen.
// check if the app is running in stand-alone mode if (window.navigator.standalone) { // stand-alone mode } else { // not in stand-alone mode }
The apple-mobile-web-app-status-bar-style
is used to style the status bar on mobile web applications. This meta tag attribute has no effect unless you specify apple-mobile-web-app-capable
to be in full-screen mode.
The viewport
controls how much a browser zooms into a page. The viewport on a mobile device can be larger or smaller than the viewable area of the screen. This can cause problems when laying out your map, or adjusting your map to fill the viewable area of the screen when the device orientation is changed.
target-densitydpi
. This permits you to specify the screen resolution. Possbile value are device-dpi
, high-dpi
, medium-dpi
, and low-dpi
.initial-scale
property controls the zoom level when the page is first loaded. By default the initial-scale is 1.0.maximum-scale
property controls how users are allowed to zoom the page in or out.user-scale
to no
.