Mobile Terminal browser initial settings apple-mobile-web-app-capable

Document directory

• Apple-mobile-web-app-status-bar-style
• Format-detection
• Viewport

Original article address

Http://blog.sina.com.cn/s/blog_4dffbd380100kvht.html

By default, the mobile terminal browser sets the width and initial size of the view.
A recent mobile terminal project encountered a problem of changing the default settings. At first, I was very skeptical that there was a problem with my own HTML writing. After some page size tests, we finally found the root cause of the problem. You can find a solution to the problem.
<Meta name = "viewport" content = "width = device-width, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = No, height = device-height "/>
<Meta name = "format-detection" content = "telephone = No">
After the above settings are added to the header file of the page, it will be OK. The following is the resolution about these settings. Record to avoid forgetting.
However, these settings are only valid in mobile terminal browsers, and those in non-mobile terminal browsers are invalid. These browsers are based on the iPhone. This is not the only annoying thing for applications involving mobile terminals for the first time ~ However, this is the most valuable thing!

Apple-mobile-web-app-capable

Sets whether a web application runs in full-screen mode.

Syntax

<meta name="apple-mobile-web-app-capable" content="yes">

Discussion

IfcontentIs setyes, The Web application runs in full-screen mode; otherwise, it does not. The default behavior is to use safari to display web content.

You can determine whether a webpage is displayed in full-screen mode usingwindow.navigator.standaloneRead-Only Boolean JavaScript property.

Availability

Available in iPhone OS 2.1 and later.

Support level

Apple extension.

Apple-mobile-web-app-status-bar-style

Sets the style of the status bar for a web application.

Syntax

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Discussion

This meta tag has no effect unless you first specify full-screen mode as described in "url ."

IfcontentIs setdefault, The status bar appears normal. If setblack, The status bar has a black background. If setblack-translucent, The status bar is black and translucent. If setdefaultOrblack, The web content is displayed below the status bar. If setblack-translucent, The web content is displayed on the entire screen, partially obscured by the status bar. The default value isdefault.

Availability

Available in iPhone OS 2.1 and later.

Support level

Apple extension.

Format-detection

Enables or disables automatic detection of possible phone numbers in a webpage in Safari on iPhone.

Syntax

<meta name="format-detection" content="telephone=no">

Discussion

By default, Safari on iPhone detects any string formatted like a phone number and makes it a link that callthe number. Specifyingtelephone=noDisables this feature.

Availability

Available in iPhone OS 1.0 and later.

Support level

Apple extension.

Viewport

Changes the logical window size used when displaying a page on iPhone.

Syntax

<meta name = "viewport" content = "width = 320,

initial-scale = 2.3, user-scalable = no">

Discussion

Use the viewport meta key to improve the presentation of your web content on iPhone. Typically, you use the viewport meta tag to set the width and initial scale of the viewport.

For example, if your webpage is narrower than 980 pixels, then you shoshould set the width of the viewport to fit your web content. if you are designing an iPhone-specific web application, you should set the width to the width of the device.

"Email" describes the properties supported by the viewport meta key and Their default values. When providing multiple properties for the viewport meta key, you shocould use a comma-delimited list of assignment statements.

When referring to the dimensions of a device, you should use the constants described in "Number" instead of hard-coding specific numeric values. For example, usedevice-widthInstead320For the width, anddevice-heightInstead480For the height in portrait orientation.

You do not need to set every viewport property. If only a subset of the properties are set, then safari on iPhone infers the other values. For example, if you set the scale1.0, Safari assumes the width isdevice-widthIn portrait anddevice-heightIn landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0, then set both of these properties.

For example, to set the viewport width to the width of the device, add this to your HTML file:

<meta name = "viewport" content = "width = device-width">

To set the initial scale1.0, Add this to your HTML file:

<meta name = "viewport" content = "initial-scale = 1.0">

To set the initial scale and to turn off user scaling, add this to your HTML file:

<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">

Use the safari on iPhone console to help debug your webpages as described in "debugging ". the console contains tips to help you choose viewport values-for example, it reminds you to use the constants when referring to the device width and height.

Availability

Available in iPhone OS 1.0 and later.

Support level

Apple extension.

Availability

Available in iPhone OS 1.0 and later.

Support level

Apple extension.

Table 1Viewport Properties

Property	Description
width	The width of the viewport in pixels. The default is980. The range is from 200 to 10,000. You can also set this property to the constants described in "number ." Available on iPhone OS 1.0 and later.
height	The height of the viewport in pixels. The default is calculated based on the value of the width property and the aspect ratio of the device. The range is from 223 to 10,000 pixels. You can also set this property to the constants described in "number ." Available on iPhone OS 1.0 and later.
initial-scale	The initial scale of the viewport as a multiplier. The default is calculated to fit the webpage in the visible area. The range is determined byminimum-scaleAndmaximum-scaleProperties. You can set only the initial scale of the viewport-the scale of the viewport the first time the webpage is displayed. Thereafter, the user can zoom in and out unless you setuser-scalableTono. Zooming by the user is also limited byminimum-scaleAndmaximum-scaleProperties. Available on iPhone OS 1.0 and later.
minimum-scale	Specifies the minimum scale value of the viewport. The default is0.25. The range is from & gt; 0 to 10.0. Available on iPhone OS 1.0 and later.
maximum-scale	Specifies the maximum scale value of the viewport. The default is1.6. The range is from & gt; 0 to 10.0. Available on iPhone OS 1.0 and later.
user-scalable	Determines whether or not the user can zoom in and out-whether or not the user can change the scale of the viewport. SetyesTo allow scaling andnoTo disallow scaling. The default isyes. Settinguser-scalableTonoAlso prevents a webpage from scrolling when entering text in an input field. Available on iPhone OS 1.0 and later.

Table 2Special viewport property values

Value	Description
device-width	The width of the device in pixels. Available on iPhone OS 1.1.1 and later.
device-height	The height of the device pixels. Available on iPhone OS 1.1.1 and later.