移动端页面需要了解的知识

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

以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame，作用是在使用ie浏览器解析页面时，有时候会使用IE7兼容模式解析页面，设置这个是强制使用高版本IE解析页面。参考 http://www.tuicool.com/articles/ra6Fjuj

2,<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport 翻译：视口，这里指我们的设备大小。在设备上设置原始大小显示和是否缩放申明
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以手动调整缩放比例

其实还可以通过viewport 把自己冒充成更宽的屏幕
参考：移动前端开发viewport的深入理解 http://www.cnblogs.com/2050/p/3877280.html

3,<meta name="format-detection"content="telephone=no">
format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有以下几个设置：
meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name="format-detection" content="adress=no"
也可以连写：meta name="format-detection" content="telephone=no,email=no,adress=no"
下面具体说下每个设置的作用：
一、telephone
你明明写的一串数字没加链接样式，而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！想去掉这个拨号链接该如何操作呢？这时我们的meta又该大显神通了，代码如下：
telephone=no就禁止了把数字转化为拨号链接！
telephone=yes就开启了把数字转化为拨号链接，要开启转化功能，这个meta就不用写了,在默认是情况下就是开启！
二、email
告诉设备不识别邮箱，点击之后不自动发送
email=no禁止作为邮箱地址！
email=yes就开启了把文字默认为邮箱地址，这个meta就不用写了,在默认是情况下就是开启！
三、adress
adress=no禁止跳转至地图！
adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启！
参考：meta标签中的format-detection属性及含义 http://blog.sina.com.cn/s/blog_51048da70101cgea.html

4，<meta name="apple-mobile-web-app-capable" content="yes" />
这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

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

<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />

建议用苹果手机测试下
 作用是控制状态栏显示样式
status-bar-style:black

 

status-bar-style:black-translucent

 

以上两个都可参考： http://blog.sina.com.cn/s/blog_6d48e77101015kqr.html

6,<link rel="dns-prefetch" href="//网址">
DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行 DNS 的解析，减少用户等待时间，提高用户体验。
在某些现代浏览器 ( Google Chrome, Firefox 3.5+ ) 中, 已经能够支持DNS的预取了, 怎么个预取呢? 就是在浏览器加载网页时, 对网页中的<link>或者<a>的href属性中的域名进行后台的预解析(上文中的 1- 5步), 并且将解析结果缓存在浏览器端, 当用户在真正点击链接时, 省去在当下的DNS解析消耗, 把这个消耗过程转嫁到用户无法感知的浏览过程中去.
参考：

什么是DNS Prefetch？ http://www.liqwei.com/program/other/2014/909.shtml
网站优化应重视DNS预获取 http://dbanotes.net/web/dns_prefetching.html
DNS优化的原理和方法 http://www.blueidea.com/tech/site/2011/8697.asp
浏览器DNS 预取读技术的危害 （禁用DNS 预读取能节省每月100亿的DNS查询） http://www.cnblogs.com/dodohua/archive/2011/03/10/1980110.html

7，<link rel="apple-touch-icon" href="/xxx_icon.png"/>
现今移动设备越来越多，苹果为iOS设备配备了apple-touch-icon私有属性，添加该属性，在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上，方便用户以后访问，个人理解就是添加手机桌面快捷方式
参考：

关于Apple设备私有的apple-touch-icon属性详解 http://blog.csdn.net/freshlover/article/details/9310437
WebApp之 apple-touch-icon http://blog.sina.com.cn/s/blog_5a073f0f01014jfc.html