html中的meta配置

1、移动端viewport标签

• width: 设置layout viewport 的宽度，为一个正整数，或字符串"device-width" 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素），即让html的宽等于设备的宽（例如设备是iphone6 宽是375 pt）,那么html的宽也是等于375px,
  如果设计图的宽是750px。那么在使用的时候像素要除于2。把图片转换为375像素之后再量取即可。
• initial-scale：设置页面的初始缩放值，为一个数字，可以带小数，是页面大小的一个乘数。如果值为1.0，那么web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。
• minimum-scale： 允许用户的最小缩放值，为一个数字，可以带小数
• maximum-scale： 允许用户的最大缩放值，为一个数字，可以带小数
• user-scalable： 是否允许用户进行缩放，值为 “no” 或 “yes”, no 代表不允许，yes 代表允许

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

2、是否启用 WebApp 全屏模式(更接近原生APP的风格)

content有两个值”yes”和”no”,默认no就是显示苹果工具栏和菜单栏

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

3、设置状态栏的背景颜色

设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效，默认值为default（白色），可以定为black（黑色）和black-translucent(灰色半透明)

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

4、告诉设备忽略将页面中的数字识别为电话号码（默认会被识别为电话号码，点击后就出现拨号状态）(iOS)

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

5、关闭移动端邮箱识别(Android)

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

6、搜索引擎优化，页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字

    <meta name="keywords" content="">

7、搜索引擎优化，页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签

    <meta name="description" content="">

8、禁止缓存

禁止浏览器从本地计算机的缓存中访问页面内容,这样设定，访问者将无法脱机浏览。

    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

9、指定网页兼容性模式

多核浏览器可以让浏览器使用最新引擎渲染

    <meta http-equiv="X-UA-Compatible" content="Chrome=1,IE=Edge" />