webapp 常用标签含义及作用

日期:2016年11月03日      标签:前端, webapp, meta, icon

viewport

viewport主要标签用来定义页面的显示,缩放等信息,常用的属性值如下:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

其中width定义展示区域的宽度,一般写成device-width代表占满设备的横向屏幕;minimum-scale、maximum-scale定义最小和最大的放大倍数;user-scalable定义是否运行用户缩放。

format-detection

format-detection主要定义一些格式识别,其中有:电话号码、邮箱、地址.

<meta name="format-detection" content="telephone=no,email=no,adress=no">

示例中,表示禁用电话号码,邮箱,地址识别。

webapp icon

当我把页面添加快捷方式到桌面的时候,我们希望他和原生app一样可以用一个我们自己定义的图标,对于ios设备来说,是有专门的标签可以使用,如下所以的apple-touch-icon标签就是用来设置icon图标的。一般情况下系统会对图标做圆角和高光的处理,如果想保持原样,可以试试apple-touch-icon-precomposed标签

<link rel="apple-touch-icon" href="icon.png" />
<link rel="apple-touch-icon-precomposed" href="icon.png"/>

如上为ios设备,如果是安卓设别的话可以试试使用shortcut和icon标签,在小米设备上自带浏览器试用成功,其他暂时没有测试,安卓设备也可以安装chrome浏览器,可以识别上面的apple-touch-icon-precomposed标签。

<link rel="shortcut icon" href="icon.png">

other

除上面两个比较常见的之外,还有一些实用的meta标签:

ios上是否全屏,经测试,这个只在打开设为主屏幕应用的时候是起作用,直接打开的页面是无效的。

<meta name="apple-mobile-web-app-capable" content="yes">

ios上状态栏的样式,有三个值,分别是:default(白色)、black(黑色)、black-translucent(黑色半透明),注意黑色半透明状态栏会占用大概20px的页面高度,ios4是40px。

<meta name="apple-mobile-web-app-status-bar-style" content="black">

uc浏览器的全屏模式,ios测试无效果,安卓待测。

<meta name="full-screen" content="yes">

qq浏览器的全屏模式,未测试。

<meta name="x5-fullscreen" content="true">

(正文完)



© 喻小右 2016 京ICP备15064386号-1