viewport是什么呢？
熟悉移动端的同学都知道，viewport就是head里面添加的一个meta，添加合适了你的页面放在所有手机和pad上看着就很舒服，比如这样的：
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
90后的产品经理小妹妹直接就看着你两眼冒星星，哇哦，html5页面好高端，大哥你好帅~
你扣一扣脚，揉一揉熬夜加班的黑眼圈，仰起45°角用鼻孔看她，告诉她——其实这个很简单，来，哥哥教你：
概念
从字面意思看，viewport是视口，观察口的意思。个人感觉就是设置看页面的角度，设置不同体验不同，有点“横看成岭侧成峰”的意思。通过对viewport content的设置，配合css达到任何角度（设备）都可以完美浏览。
相关知识
了解viewport的使用先要了解各种移动设备屏幕。首先要了解的是分辨率，分辨率这个东西特别好理解，直接按照你的设备百度即可。比如说魅族MX4，百度出来直接就是高1920*宽1152。这就是我们前端用到的像素，跟你pc电脑的分辨率是一样一样的，比如一般笔记本的宽1366*高768。当然魅族这个因为屏占比和尺寸的原因算是比较奇葩了，主流1080P的分辨率为1920*1080。
说这个东西干什么呢，说这个东西的意思你不要在乎手机的尺寸，4.7寸的1080P的手机比6寸的720P的手机像素点多的多。尺寸和分辨率结合才能算出来dpi，这个才是我要说的重点。就是上面代码中的target-densitydpi，根据设备分辨率和设备的不同而不同，这个有个确定的计算公式，我太笨学不会，你要深入了解可以去google。当然并不是所有的设备像素都可以跟分辨率划等号，比如说我们伟大的apple公司用的视网膜屏幕，你看看iphone6 plus的分辨率再测试下它的实际像素就知道了。
上面说的东西如果你认真看肯定能看明白，如果没明白请反复看，如果实在看不明白就转行吧，这个行业不适合你。
解释完dpi就要说它怎么用了，使用的话继续往下看。
内容
类似于最开始的代码，viewport放在meta标签中，属性设置都在content里。
target-densitydpi
刚才上面扯了半天就是想说这个东西。已经解释的很清楚了，在这儿设置能极好的让你css里写的像素和设备的像素匹配，但是所有的设备尺寸分辨率千差万别，算出来的dpi更是差异很大。在这个时候把所有的设备的user-agent拿到，然后写进去，判断设备然后填写对应的dpi，同时针对每个屏幕写css样式。能做到这一点基本不可能，如果真做到了说明你傻。
device-dpi
target-densitydpi里面有个属性就是device-dpi，设置这个的话就达到了上面的效果。如果设备是720P的分辨率，那这么设置的话你的页面就是在1280*720的视口下浏览。设置了视口具体怎么在不同的分辨率的手机里展示基本一致的页面又是另外一个问题了，我有时间抽空再写篇文章说明一下。
medium-dpi
上面说的是它的第一个属性device-dpi，还有个比较重要的属性是medium-dpi，这个目前大家用的多但是写的少，什么意思呢？当你的viewport里不设置target-densitydpi的时候当前默认就是medium-dpi。所以很多前端甚至可能都不知道viewport里面有关于dpi这个东西，但是他们从来不设置这个东西，所以他们默认使用了medium-dpi。
medium-dpi是设置dpi密度值为160，让所有的设备都按照这个密度来显示，这时候高密度的设备与低密度的设备每个物理尺寸下的像素密度是一样的，区别在于屏幕大小。这个非常有用，很多人不设置则默认为此数值，文字大小直接在所有设备上展现基本一致，不会出现大屏幕文字小，小屏幕文字大的情况。剩下的就是响应式来写内容了。（没事的话可以找公式计算一下160密度下一厘米有多少个像素点，算出来理解起来更直观）
（这块主要就介绍这两个常用的属性，以小见大，其他不常用的就不赘述了，想了解自己去查）
理解了上面的dpi，其他的就简单了：
width & height 控制视口宽高的，很简单，属性自己查
initial-scale & minimum-scale & maximum-scale 控制缩放的，属性自己查
user-scalable 控制用户是否可缩放
这个东西已经被人说了很多次了，但是感觉最精华的说的不是很好理解或者很明白就自己再提一下。上面其实就说了一个重点——dpi，这个东西当时做的时候好尴尬，不会瞎琢磨，查文档，用N多台真机测试。到最后当彻底理解了这个东西后，只要css不差，所有的问题迎刃而解。在这里吃过亏就写详细点儿，其他的度娘和google上都有，就不多说了。理解了之后还要合理搭配css使用才能写好你的移动端页面，这个就是经验问题了。有时间再写个东西说明一下。
（有问题麻烦批评指正，谢谢）
本文出自 “曾梦想仗code走天涯” 博客，谢绝转载！
原文地址：http://doraemon.blog.51cto.com/8338240/1564546
