移动端常用META标签总结

移动端基本上必加的几个标签

声明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"/>

这里说明一下其它几个属性的作用:

忽略数字自动识别为电话号码

在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有效)

WebApp全屏模式

当我们将一个网页添加到主屏幕时，会更希望它能有像App一样的表现，没有地址栏和状态栏全屏显示。

     <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"/>

添加到主屏后的图标

     <link href="图片的地址" sizes="114x114" rel="apple-touch-icon-precomposed"/>

IOS系统中对ICON有一套规范，就是在IOS设备的图标统一为“四边圆角”、“高光处理”。至于“图标阴影”，是IOS设备中统一为所有桌面元素增加的，所以不作为图标单独处理的样式。rel="apple-touch-icon-precomposed"是设定按照设计稿原图的图标显示，rel="apple-touch-icon"是设定在原图的基础上增加一些高光光亮效果。一般来说我们的ICON的尺寸是114x114。

添加到主屏后的标题

     <meta name="apple-mobile-web-app-title" content="标题"/>

其它的一些移动端偶尔使用的META标签

添加智能App广告条 Smart App Banner(不常用)

     <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"/>

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"/>