声明viewport视口
viewport对于移动端设备来说非常的重要，用于定义视口的各种行为。其中最为重要的就是要设定一个展示页面的宽度width=device-width，如果我们不设置的话，width默认的值是980PX，假设我们当前用的是IPHONE 5来访问H5页面，IPHONE 5本身的宽度只有320PX，但是设备定义了H5页面展示的区域宽度应该是980PX，这样的话要想把H5页面全部进行展示，只有整体缩小大约三倍或者让用户在320PX的区域中来回的挪动才能看全整个H5页面。这种方式用户的体验度会非常的差，所以我们设定width=device-width，意思是当前设备屏幕有多宽，那么就按照多宽来渲染页面，这样就不会出现需要靠缩小或者左右移动来看完整个页面了。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
width 正整数或device-width 定义视口的宽度，单位为像素
height 正整数或device-height 定义视口的高度，单位为像素
initial-scale [0.0-10.0] 定义初始缩放值
minimum-scale [0.0-10.0] 定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale [0.0-10.0] 定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable yes/no 定义是否允许用户手动缩放页面，默认值yes
忽略数字自动识别为电话号码
在IOS Safari（其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接。比如：7位数字，形如：1234567；带括号及加号的数字，形如：(+86)123456789；双连接线的数字，形如：00-00-00111；11位数字，形如：13800138000可能还有其他类型的数字也会被识别，但在具体的业务场景中，有些时候这是不必须的，所以你可以关闭电话自动识别，然后在需要拨号的地方，开启电话呼出和短信功能。
关闭电话自动识别：
<meta name="format-detection" content="telephone=no"/>
开启拨打电话/发送短信功能
<a href="tel:123456">立即拨打电话</a> <a href="sms:123456">立即发送短信</a>
如果同样也需要禁止自动识别邮箱，可以在原来的基础上增加“email=no”。
<meta name="format-detection" content="telephone=no,email=no"/>
开启自动识别邮箱
<a href="mailto:zhufengpeixun@163.com">给我们发邮件</a>
把页面增加到桌面主屏幕
在苹果手机的Safari浏览器中访问一个页面，用户可以通过“添加到桌面”这一操作把网页保存到自己的主屏幕桌面上（就像安装一个APP，在主屏幕上就会有一个操作的图标），这样下一次可以直接点击图标打开页面。(只对IOS有效)
当我们将一个网页添加到主屏幕时，会更希望它能有像App一样的表现，没有地址栏和状态栏全屏显示。
WebApp全屏模式
<meta name="apple-mobile-web-app-capable" content="yes"/>
设置状态栏颜色
只有在开启WebApp全屏模式下才能起到效果。content的值为 default(状态栏将为正常的，即白色，网页从状态栏以下开始显示) | black(状态栏将为黑色，网页从状态栏以下开始显示) | black-translucent(状态栏将为灰色半透明，网页将充满整个屏幕，状态栏会盖在网页之上)。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
添加到主屏后的图标
IOS系统中对ICON有一套规范，就是在IOS设备的图标统一为“四边圆角”、“高光处理”。至于“图标阴影”，是IOS设备中统一为所有桌面元素增加的，所以不作为图标单独处理的样式。rel="apple-touch-icon-precomposed"是设定按照设计稿原图的图标显示，rel="apple-touch-icon"是设定在原图的基础上增加一些高光光亮效果。一般来说我们的ICON的尺寸是114x114。
<link href="图片的地址" sizes="114x114" rel="apple-touch-icon-precomposed"/>
添加到主屏后的标题
<meta name="apple-mobile-web-app-title" content="标题"/>
QQ浏览器(X5内核)独有的META
<meta name="x5-orientation" content="portrait|landscape"/> //->设置屏幕方向 <meta name="x5-fullscreen" content="true"/> //->设置全屏
UC浏览器独有的META
<meta name="screen-orientation" content="portrait|landscape"/> //->设置屏幕方向 <meta name="full-screen" content="true"/> //->设置全屏 <meta name="viewport" content="uc-fitscreen=no|yes"/> //->缩放不出现滚动条 <meta name="nightmode" content="enable|disable"/> //->夜间模式
强制图片显示：UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode。通过META设置图片加载方式会作用于整个页面，如果希望对单个图片进行设置，那么可以使用这个<img src="" show="force"/>
<meta name="imagemode" content="force"/>
使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。
<meta name="browsermode" content="application"/>
网友评论