前端开发meta

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

content属性值:

     width:可视区域的宽度，值可为数字或关键词device-width

     height:同width

     intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

     maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，

     maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

     user-scalable:是否可对页面进行缩放，no 禁止缩放

name="viewport":

   在做移动端设备开发的时候，一定要先明白移动设备的viewport,这也是浏览器的视口，不同的设备浏览器设备viewport是不一致的，下面是一般设备的浏览器viewport。

    

  随着移动设备的像素越来越高，但是设备的屏幕并没有相应的大小特别的改变，所以我们移动设备的像素中的px并不是一定等于我们css中的px，而且当用户缩放的时候也会引起像素的相应变化，  ppk大神对于移动设备上的viewport有着非常多的研究（第一篇，第二篇，第三篇）ppk把这个浏览器默认的viewport叫做 layout viewport。这个layout viewport的宽度可以通过document.documentElement.clientWidth 来获取。

    然而，layout viewport 的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表 浏览器可视区域的大小，ppk把这个viewport叫做 visual viewport。visual viewport的宽度可以通过window.innerWidth 来获取，但在Android 2, Oprea mini 和 UC 8中无法正确获取。

   ideal viewport  移动设备的理想viewport，怎么获取这个ideal viewport 呢？

我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

此外，在安卓中还支持  target-densitydpi  这个私有属性，它表示目标设备的密度等级，作用是决定css中的1px代表多少物理像素，值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个。因为这个属性只有安卓支持，并且安卓已经决定要废弃target-densitydpi  这个属性了，所以这个属性我们要避免进行使用  。

把当前的viewport宽度设置为 ideal viewport 的宽度

要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。

 

两种方法使移动设备宽度变为理想宽度：

<meta name="viewport" content="initial-scale=1">经过测试这一个比较好一点只有IE不行

<meta name="viewport" content="width=device-width"> iPhone和iPad不行

<meta name="viewport" content="width=device-width, initial-scale=1">最完美的写法