html5培训基础知识第二发:常用的META标签(移动端)

作者:zhouxiaotian日期:2016-07-02 01:38:39 点击:1243 meta

移动端常用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"/>

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

Name Value Description
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有效)

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

上一篇: html5培训基础知识第一发:常用的META标签

下一篇: html5培训系列之检测浏览器的类型(PC端还是移动端)