HTML 头部
<head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telephone=no" /> <meta name="format-detection" content="email=no" /> <meta name="keywords" content="关键词" /> <meta name="description" content="描述" /> <title>响应式与移动端</title> <!--链接在新窗口打开--> <base target="_blank"> <!--打印样式--> <link rel="stylesheet" href="print.css" media="print" /> <noscript> <p> 浏览器不支持 Javascript ！ </p> </noscript> </head>
viewport：我们称之为视图，其实是移动端览器上的虚拟窗口，viewport的边缘代替了浏览器的边缘，成为了窗口的边缘。默认情况下这个虚拟窗口要比实际窗口大。移动端最初这么做的目的是为了不让页面缩在一个很小的屏幕上影响阅读，而是让用户通过缩放和拖动的手势浏览网页的不同部分。这么做可以让那些没有针对移动端进行优化的网页正常浏览。那么，现在我们自己可以设置viewport的尺寸，这可能会造成更多的困惑，就是什么样的尺寸才是合适的。
width=device-width：设定viewport宽度为设备宽度，但是这里要注意，device-width并非实际的屏幕宽度像素值，而是一个被设备处理过的值，比如在iPhone上返回的是320px（你可以在这个网站查看几乎所有设备的device-width返回值）。包括Android在内的所有设备都返回在一个设备开发者认为的最理想的适合布局界面的值作为device-width。这可能是设计师和前端开发人员之间需要不断沟通的一个主要问题，因为设计稿常常是640px的，而它却要显示在320px宽的屏幕里。这是厂商在解决高分辨率屏幕显示网页的一个办法。在iPhone上，如果没有设定viewport的元信息，视图的默认宽度会是980px。
initial-scale=1：初始化页面时的缩放比例为1:1，也就是不缩放。
user-scalable=no：禁用用户缩放。首先，你要知道这可能是一种不好的体验。因为用户已经有用双指pinch，或双击放大的经验，但这种习惯似乎正在被越来越多的对移动浏览进行过优化的网站所改变。
此外，还有人为viewport设置其他属性，比如minimum-scale=1，maximum-scale=1 这么做的目的其实也是为了禁用用户缩放，但是，没必要都设置，只有一个user-scalable=1就能达到我们想要的效果。关于viewport你可以在苹果的开发者文档里了解到更多参数，如果你想更深入地了解viewport的原理请点击这里。
我们简单来看下上面代码中其他标签的含义：
第2行代码指定页面编码为UTF-8；
第3行的http-equiv元信息，和设置http报头是等价的，但是此处的“X-UA-Compatible”并非标准属性。chrome=1的意义是如果IE用户安装了Chrome Frame的插件，就用这个插件来呈现页面；如果没安装那么就用IE最新的引擎呈现页面。
第5、6行在网站按常规流程来浏览时是不会起作用的，只有在网站是从主屏幕上启动时才有效，也就是说用户要主动把当前网站作为标签保存在主屏幕上，就像一个安装在本机的app一样。
第7、8行禁用电话和email的自动识别。
使用-webkit-text-size-adjust:none，在iphone上禁用字体大小调整。
css代码：
html { -webkit-text-size-adjust: none; }
参考链接：
