HTML WebApp Meta

WebApp Meta 標(biāo)簽設(shè)置(iOS)

A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms.

WebApp 目的在于使其界面和行為在某種程度上類似于原生APP應(yīng)用。例如，WebApp 可以在 iOS 設(shè)備上通過縮放去適配設(shè)備屏幕。當(dāng)用戶將 WebApp 程序添加到主屏幕后，會(huì)使得它看上去像原生 APP 一樣，以此，你可以進(jìn)一步為 Safari 定制自己的 WebApp，而使用某些專為 iOS 平臺設(shè)定的設(shè)置就可以做到。

WebApp可以通過設(shè)置 meta 標(biāo)簽來改變頁面的一些表現(xiàn)，有些 meta 設(shè)置在 Safari 應(yīng)用或原生 App 的內(nèi)嵌網(wǎng)頁中都可以生效，而有些設(shè)置側(cè)需要將應(yīng)用添加到主屏幕的時(shí)候才會(huì)生效。

Viewport Meta Tag

通用類設(shè)置

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
maximum-scale=1.0, user-scalable=no">

• width – viewport的寬度
• height – viewport的高度
• initial-scale – 初始的縮放比例
• minimum-scale – 允許用戶縮放到的最小比例
• maximum-scale – 允許用戶縮放到的最大比例
• user-scalable – 是否允許用戶縮放

Safari on iOS viewport

The width of the viewport in pixels. The default is 980. The range is from 200 to 10,000.The minimum-scale and maximum-scale properties also affect the behavior when changing orientations. The range of these property values is from >0 to 10.0. The default value for minimum-scale is 0.25 and maximum-scale is 5.0

user-scalable – The default is yes. Setting user-scalable to no also prevents a webpage from scrolling when entering text in an input field.

• 默認(rèn)寬度是 980px，范圍從 200px 到 10000px
• initial-scale 縮放比例范圍值是 從 >0 到 10 之間
• minimum-scale 默認(rèn)值是 0.25
• maximum-scale 默認(rèn)值是 5
• user-scalable – 默認(rèn)值是 yes，設(shè)置 no 還可以在文本框輸入文本的時(shí)候阻止頁面滾動(dòng)

更多關(guān)于 Safari on iOS viewport 的設(shè)置:

Configuring the Viewport Safari HTML Reference

Apple-Specific Meta Tag Keys

apple-mobile-web-app-capable

設(shè)置 WebApp 是否進(jìn)入全屏模式，該設(shè)置需要添加到主屏幕才生效

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

If content is set to yes, 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 using the window.navigator.standalone read-only Boolean JavaScript property.

• content設(shè)置 yes 進(jìn)入全屏模式
• 默認(rèn)會(huì)啟動(dòng) Safari 應(yīng)用，使用 Safari 應(yīng)用瀏覽
• 通過檢測 window.navigator.standalone 的 Boolean 值可以判斷 web 應(yīng)用是否處于全屏模式

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

為 webapp 設(shè)置狀態(tài)欄樣式

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

This meta tag has no effect unless you first specify full-screen mode as described in apple-apple-mobile-web-app-capable.

If content is set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar. The default value is default.

• 此 meta 設(shè)置只在全屏模式生效
• 默認(rèn)值是 default
• content=”black”，狀態(tài)欄背景黑色，網(wǎng)頁內(nèi)容在狀態(tài)欄下面
• content=”black-translucent”，狀態(tài)欄半透明，背景黑色，網(wǎng)頁內(nèi)容占滿全屏

該設(shè)置在 iOS6 和 iOS7 表現(xiàn)還可以，但到了 iOS8 后會(huì)出現(xiàn)各種問題，而且在 iOS9 中并沒有生效。參閱：iOS 8: web app status bar position and resizing problems

format-detection

自動(dòng)識別頁面中有可能是電話格式的數(shù)字

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

By default, Safari on iOS detects any string formatted like a phone number and makes it a link that calls the number. Specifying telephone=no disables this feature.

iOS中的 Safari 會(huì)默認(rèn)識別與電話格式相似的數(shù)字并生成一個(gè)可以拉起電話應(yīng)用并將該數(shù)字作為電話號碼撥打的鏈接。定義 telephone=no 可以屏蔽該功能

更多 WebApp 設(shè)置參考 Configuring Web Applications