移动端响应式页面的兼容和网页的渲染

移动端响应式页面的兼容

<meta name="viewport" content="width=device-width, initial-scale=1">

这个标签的解释：
这是针对移动网页标签，即我们写的网页如果要跑在移动端上的话，一般我们就要写这个东西，而且要写在引入其他文件的标签的前面

<meta name="viewport" content="width=device-width, initial-scale=1">

viewport

viewport是用户网页的可视区域，即视区，
手机浏览器是把页面放在一个虚拟的窗口即viewport中，通常这个虚拟的窗口（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
即意思是 前面加name="viewport"就是为了指明这条标签是用于设置移动端的相关内容的

content

content用来写内容，即控制页面的属性，他的值有下面这些东西

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位						为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

content的值本身又有值，他可以像下面这样设置值

width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：初始缩放比例为一倍，也即是当页面第一次 load 的时候缩放比例。
minimum-scale=2.0：允许用户缩放到的最大比例为2倍
maximum-scale=3.0：允许用户缩放到的最小比例为3倍
user-scalable=yes：用户可以手动缩放

width
设置layout viewport的宽度，为一个正整数，或字符串"width-device"
initial-scale
设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale
允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale
允许用户的最大缩放值，为一个数字，可以带小数
height
设置layout viewport的高度，这个属性对我们并不重要，很少使用
user-scalable
是否允许用户进行缩放，值为"no"或"yes", no代表不允许，yes代表允许

网页的渲染

<meta http-equiv="X-UA-Compatible" content="IE=edge">

这个标签的解释：
指定浏览器按某种方式渲染，这个标签就是告诉浏览器你该用什么方式来运行渲染页面
强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果用分号（；）分隔，对于不同的浏览器版本就有不同的兼容性，比如
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" />

反正，http-equiv="X-UA-Compatible"不需要知道，只要知道content="IE=edge"的意思就行

content

<meta http-equiv="X-UA-Compatible" content="IE=edge">
当IE的值为edge
这里设置为edge的话意思就是，指定浏览器按照最高的标准模式解析页面