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 标签来改变页面的一些表现，有些 meta 设置在 Safari 应用或原生 App 的内嵌网页中都可以生效，而有些设置侧需要将应用添加到主屏幕的时候才会生效。

Viewport Meta Tag

通用类设置

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, 
  2. 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 是否进入全屏模式，该设置需要添加到主屏幕才生效

  1. <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 设置状态栏样式

  1. <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”，状态栏背景黑色，网页内容在状态栏下面
  • content=”black-translucent”，状态栏半透明，背景黑色，网页内容占满全屏

该设置在 iOS6 和 iOS7 表现还可以，但到了 iOS8 后会出现各种问题，而且在 iOS9 中并没有生效。参阅：iOS 8: web app status bar position and resizing problems

format-detection

自动识别页面中有可能是电话格式的数字 

  1. <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 会默认识别与电话格式相似的数字并生成一个可以拉起电话应用并将该数字作为电话号码拨打的链接。定义 telephone=no 可以屏蔽该功能

更多 WebApp 设置参考 Configuring Web Applications