移动web入门之meta标签

标签：

meta标签学习总结：

　　Meta标签的name属性语法格式：＜meta name="参数" content="具体参数值"＞

　　1.viewport

　　首先，我们对viewport要有一个理解：

　　　　通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的 webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区 域要小。

　　接下来就是后面的参数和参数值的意义：

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

　　　　initial-scale - 初始的缩放比例  
　　 　 minimum-scale - 允许用户缩放到的最小比例   
　　 　 maximum-scale - 允许用户缩放到的最大比例  
　　 　 user-scalable - 用户是否可以手动缩放

　　2.format-detection

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

　　忽略页面中的数字识别为电话，忽略email识别

　　3.IOS私有的两个属性：apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style

　　<meta name="apple-mobile-web-app-capable" content="yes" />的作用是启用 webapp 模式, content值为yes时会隐藏工具栏和菜单栏，和其它配合使用。

　　<meta name="apple-mobile-web-app-status-bar-style" content="black" />的作用是在webapp模式下，改变顶部状态条的颜色。默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）

　　4.<meta name="apple-touch-fullscreen" content="yes">

　　"添加到主屏幕“后，全屏显示

　　5.<meta name="theme-color" content="#91D4DA">

　　控制选项卡颜色，如下图：

//code from http://caibaojian.com/mobile-meta.html
<meta name="format-detection" content="telphone=no, email=no"/>

移动web入门之meta标签

标签：

原文地址：http://www.cnblogs.com/chenyHAHA/p/5763436.html