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

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

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

2， 手机网页meta 设置

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

a、

   

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

    

c、
   

说明：

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

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

    

d、
   

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

    

e、
     

    

f、
   

说明：这样就能在用户把网页存为书签时，在手机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就是设置启动时候的界面，放置的路劲和上面类似。

使用：

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

  

h、

"

    

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

    还有一种有趣的方法
    创建html5时发现这么一句话，如下：
   

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

如下：