meta viewport

[izuomeng]

最近在看一些网站源码的时候经常看到meta viewport这个标签，之前只有一个粗略的了解知道是跟调整视口相关的元标签，现在来详细的了解一番其中具体的原理和作用。因为这个标签主要是针对移动端的，因此我们来看看移动端的视口究竟是什么

视觉视口

视觉视口说白了就是移动设备的物理分辨率，是跟硬件相关的，出厂的时候就已经设计好的，一般来说像素密度越大，屏幕越大的设备其物理像素值越高，例如iPhone 6的物理像素为750 * 1334，这个值在我们开发的时候是很少用到的，因此我们最先说它

理想视口

理想视口是不同设备为了让网页展示为看起来最舒服最合理的大小而设置的，不同型号不同大小的手机都不尽相同，一般都是设备厂家默认设置的固定值。为了搞清楚这个概念，下面解释两个相关的又容易搞混的概念

逻辑像素和倍率

逻辑像素(dip)是与设备像素密度无关的值，它是为了人的肉眼体验而设置的，一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。
理想视口大小就跟设备的逻辑像素有关，对于电脑来说，当你在设置中改变屏幕的分辨率时，就相当于改变了理想视口的大小，如果这个值和物理像素值不一样，此时就相当于产生了缩放，这个比率就叫倍率，二者满足如下关系：逻辑像素值*倍率 = 物理像素值
但是对于手机来说，一般是无法设置屏幕的分辨率的，因此这个倍率都是固定的，这些值可以很容易查到，举一个例子，还是iPhone 6，逻辑像素 375 * 667，物理像素 750 * 1334，倍率是2

CSS像素

CSS像素就是在写CSS时指定的px值，如果屏幕没有缩放的话，CSS像素值就等于逻辑像素的值，否则，CSS像素与逻辑像素的比例即为网页的缩放比例(你在手机上把一个div放大了，它的CSS像素值还是之前设置的宽度并没有变，但是视觉上它确实变大了，也就是它占据的逻辑像素更多了)

布局视口

布局视口用一张图就能解释清楚了

顾名思义，布局视口就是网页布局时用到的页面大小，例如布局视口时300px，这是你设置一个div的宽度为100px，那么他就会占据整个屏幕三分之一的宽度，当然如果超出这个值表现类似于PC端，也会超出视口，出现滚动条。

viewport

说了这么多下面就要说到我们的viewport这个元标签了，在这个标签中设置的width值(正整数或'device-width')，决定的就是布局视口的大小，一般安卓和ios的默认值都是980px，这样可以让没有针对移动端优化的页面也可以正常显示在手机上，布局并不会产生混乱。这个标签的一般都设置为如下形式

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

含义就是让布局视口大小等于设备理想视口大小，这样有利于自适应布局，怎么有利呢，在你设置元素的大小的时候，你所设置的CSS宽度刚好也就是视觉上所对应的宽度，在不同大小的屏幕上所看到的元素大小基本都是相同的，开发者就可以只考虑屏幕大小对网页布局的影响，这样就有利于响应式布局了，屏幕小了，我就可以让同一行显示不下的元素换一行显示，而不是挤在一起非常影响美观，前面提到因为device-width就是设备逻辑像素值，这样的网页看起来也是最舒服的。
其他两个属性是控制缩放的，看英文意思就知道有什么用了，不详细解释，下面给个简单的介绍