html5手机网站需要加的那些meta标签，手机网站自适应

 此篇笔记从以下几篇博文归纳总结而来：

1，html5手机网站需要加的那些meta标签，手机网站自适应

2， 手机网页meta 设置

3，移动终端H5页面meta标签的设置案例

a、<!-- 强制让文档与设备的宽度保持1：1 -->

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

这个meta标签表示：网页宽度默认等于屏幕宽度（width=device-width），初始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

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

initial-scale- 初始的缩放比例

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

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

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

    

b、<!-- 删除默认的苹果工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes">

这个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

    

c、<!-- 在web app应用下状态条（屏幕顶部条）的颜色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

说明：

• 这个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
• 默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）；

注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

    

d、<!-- 是否识别 手机号码、电子邮件、地址等 -->
    <meta name="format-detection" content=" telephone=no,email=no,address=no"/>

当该 HTML 页面在手机上浏览时，该标签用于指定是否将页面中的文本内容识别为手机号码、电子邮件、地址等。

    

e、<!-- 浏览网站时的小图标 -->
    <link rel="shortcut icon" href="http://p.www.xiaomi.com/favicon.ico" type="/image/x-icon">  

    

f、<!-- 添加至主屏时的图片 -->
    <link rel="apple-touch-icon-precomposed" href="http://a.tbcdn.cn/mw/s/hi/tbtouch/images/touch-icon.png">

说明：这样就能在用户把网页存为书签时，在手机HOME界面创建应用程序样式的图标。这个link就是设置web app的放置主屏幕上icon文件路径。

使用：

• 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
• 图片尺寸可以设定为57*57（px）或者Retina可以定为114*114（px），ipad尺寸为72*72（px）
• iOS用rel="apple-touch-icon",Android 用rel="apple-touch-icon-precomposed"

   

g、<!-- 设置启动时候的界面 -->

<link rel="apple-touch-startup-image" href="milanoo_startup.png" />

说明：这个link就是设置启动时候的界面，放置的路劲和上面类似。

使用：

• 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
• 官方规定启动界面的尺寸必须为 320*640（px），原本以为Retina屏幕可以支持双倍，但是不支持，图片显示不出来。

  

h、<!-- 设置在apple上以应用模式启动时，是否全屏 -->

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

    

==================

    还有一种有趣的方法
    创建html5时发现这么一句话，如下：
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>

    这样写可以达到的效果是如果安装了GCF（Google Chrome Frame 谷歌内嵌浏览器框架的简称），则使用GCF来渲染页面，如果没安装GCF，则使用最高版本的IE内核进行渲染。这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器。

如下：

<!-- 适应移动端start -->
    <!-- width viewport 宽度(数值/device-width)
        height viewport 高度(数值/device-height)
        initial-scale 初始缩放比例
        maximum-scale 最大缩放比例
        minimum-scale 最小缩放比例
        user-scalable 是否允许用户缩放(yes/no)
        minimal-ui iOS 7.1 beta 2 中新增属性，在页面加载时最小化上下状态栏
     -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 设置苹果工具栏颜色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <meta name="format-detection" content="telphone=no, email=no" />
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- 适应移动端end -->