HTML WebApp Meta

WebApp Meta 標簽設置(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應用。例如，WebApp 可以在 iOS 設備上通過縮放去適配設備屏幕。當用戶將 WebApp 程序添加到主屏幕后，會使得它看上去像原生 APP 一樣，以此，你可以進一步為 Safari 定制自己的 WebApp，而使用某些專為 iOS 平臺設定的設置就可以做到。

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

Viewport Meta Tag

通用類設置

<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.

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

更多關于 Safari on iOS viewport 的設置:

Configuring the Viewport Safari HTML Reference

Apple-Specific Meta Tag Keys

apple-mobile-web-app-capable

設置 WebApp 是否進入全屏模式，該設置需要添加到主屏幕才生效

<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設置 yes 進入全屏模式
• 默認會啟動 Safari 應用，使用 Safari 應用瀏覽
• 通過檢測 window.navigator.standalone 的 Boolean 值可以判斷 web 應用是否處于全屏模式

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

為 webapp 設置狀態(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 設置只在全屏模式生效
• 默認值是 default
• content=”black”，狀態(tài)欄背景黑色，網(wǎng)頁內容在狀態(tài)欄下面
• content=”black-translucent”，狀態(tài)欄半透明，背景黑色，網(wǎng)頁內容占滿全屏

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

format-detection

自動識別頁面中有可能是電話格式的數(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 會默認識別與電話格式相似的數(shù)字并生成一個可以拉起電話應用并將該數(shù)字作為電話號碼撥打的鏈接。定義 telephone=no 可以屏蔽該功能

更多 WebApp 設置參考 Configuring Web Applications