webAPP的 meta属性(整理)

webAPP的 meta属性

 

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

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

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

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

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

 content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,target-densitydpi=medium-dpi, minimal-ui"

 

1、<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,target-densitydpi=device-dpi" />

 

    width - viewport的宽度 height - viewport的高度

    initial-scale - 初始的缩放比例

    minimum-scale - 允许用户缩放到的最小比例

    maximum-scale - 允许用户缩放到的最大比例

    user-scalable - 用户是否可以手动缩放

    target-densitydpi: 

        device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。

        high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。

        medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.

        low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。

        <value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。

   可单独设置：如，<meta name="viewport" content="target-densitydpi=200" />

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

    iphone的私有标签，它指定的iphone中safari顶端的状态条的样式。

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。

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

    告诉设备忽略将页面中的数字识别为电话号码。

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

    iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

作用就是删除默认的苹果工具栏和菜单栏，

ontent有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

5、<meta name="apple-touch-fullscreen" content="yes" />

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

 

 

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!--以IE8模式渲染-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-touch-fullscreen" content="YES" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />