ArcGIS API for JavaScript ^3.26

The viewport is the viewable area of the canvas. You can read more about the viewport in Apple's Safari Web Content Guide.

Meta Tags

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" />

apple-mobile-web-app-capable

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
}

apple-mobile-web-app-status-bar-style

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.

viewport

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.

• width - The width attribute sets the width to the value of the device width. For instance, setting it to device-width would be the same as setting it to 320 (the value is in pixels) for the iPhone. Android devices support an additional property, target-densitydpi. This permits you to specify the screen resolution. Possbile value are device-dpi, high-dpi, medium-dpi, and low-dpi.
• initial-scale - The initial-scale property controls the zoom level when the page is first loaded. By default the initial-scale is 1.0.
• maximum-scale - The maximum-scale property controls how users are allowed to zoom the page in or out.
• user-scale - You can disable viewport zooming and prevent by setting user-scale to no.