要搞懂移动端的适配问题，就要先搞明白像素和视口。
像素 在移动端给一个元素设置 width:200px 时发生了什么？这里的 px 到底是多长呢？像素是网页布局的基础，但是我们一直在用直觉使用它。
其实存在两种像素：
设备像素 屏幕的物理像素，任何设备屏幕的物理像素的数量都是固定不变的。
css像素 在css、js中使用的一个抽象的概念，单位是 px 。
顺便说下，css像素也可以称为 设备独立像素 (device-independent pixels)，简称为 dips ，单位是 dp 。
那么，我们现在再来说说一个元素 width:200px 以后会怎么样。这个元素跨越了200个css元素，200个css元素相当于多少个设备像素取决于两个条件：
页面是否缩放 屏幕是否为高密度 这两方面后面再解释，先梳理一下手机硬件之间的关系，注意这里使用的都是 物理像素 。
以 iphone5 为例，我们已知的是：
分辨率： 1136pt x 640pt
指屏幕上垂直有 1136 个物理像素，水平有 640 个物理像素
屏幕尺寸： 4英寸
注意 英寸 是长度单位，不是面积单位。4英寸指的是屏幕对角线的长度。
屏幕像素密度： 326dpi
屏幕像素密度（pibel per inch）简称 ppi ，单位是 dpi （dot per inch）。这里指屏幕水平或垂直每英寸有326个物理像素。
原则上来说，ppi越高越好，因为图像会更加细腻清晰。
ppi 是可以通过 分辨率 和 屏幕尺寸 计算得到的：
这个网站 列出了很多设备的 分辨率 和 屏幕尺寸 ，并且计算了 ppi 。
视口 桌面浏览器中，浏览器窗口就是约束你的css布局视口（又称初始包含块）。它使所有css百分比宽度推算的根源，它的作用是 css布局限制了一个最大宽度 ，视口的宽度和浏览器窗口宽度一致。
但是在移动端，情况就很复杂了。
布局视口 一个没有为移动端做优化的网页，会尽可能缩小网页让用户看到所有东西。
这是我的手机查看 博客园 的样子，你也可以在chrome中以移动开发模式看到。
浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把视口宽度设置地很大，一般在 768px ~ 1024px 之间，最常见的宽度是 980px。
所以，在手机上，视口与移动端浏览器屏幕宽度不再相关联，是完全独立的，这个浏览器厂商定的视口被称为 布局视口 。
布局视口我们是看不见的，只知道网页的最大宽度是 980px ，并且被缩放在了屏幕内。
可以这样设置布局视口的宽度：

媒体查询与布局视口 700px 指的是布局视口的宽度
@media (min-width: 700px){ ...}
document.documentelement.clientwidth/height 返回布局视口的尺寸
视觉视口 视觉视口是用户正在看到的网页的区域，大小是屏幕中css像素的数量。
window.innerwidth/height 返回视觉视口的尺寸
理想视口 布局视口明显对用户是不友好的，完全忽略了手机本身的尺寸。所以苹果引入了理想视口的概念，它是 对设备来说最理想的布局视口尺寸 。理想视口中的网页用户最理想的宽度，用户进入页面的时候不需要缩放。
现在讨论所谓的『最理想的宽度』到底是多少？其实，如果我们把布局视口的宽度改成屏幕的宽度不就不用缩放了么。可以这样设置告诉浏览器使用它的理想视口：

定义理想视口是浏览器的事情，并不能简单地认为是开发者定义的，开发者只能使用。
screen.width/height 返回理想视口的尺寸，有严重的兼容性问题---可能返回两种值：
理想视口的尺寸（下载浏览器） 屏幕的设备像素尺寸（内置浏览器） screen size tests 和 understanding viewport 可以测试你的设备的 screen.width 值，同一设备的不同浏览器返回的值可能是不一样的。这一情况主要发生在默认浏览器和下载浏览器（如uc、chrome）之间。
默认浏览器是安卓系统内置的浏览器，长下面那个样子。而且它使用的是webkit而不是blink。只有在更新安卓系统的时候才能更新它。直到安卓4.3，google不再更新。
而下载浏览器都返回的是理想视口尺寸。
缩放 缩放与设备像素、css像素的关系 缩放是在放大或缩小css像素，比如一个宽度为 200px 的元素无论放大，还是200个css像素。但是因为这些像素被放大了，所以css像素也就跨越了更多的设备像素。缩小则相反。
缩放与视口 缩放会影响视觉视口的尺寸 页面被用户放大，视觉视口内css像素数量减少；被用户缩小，视觉视口内css像素数量增多就行了。这个道理应该是不难想的。
用户缩放不会影响布局视口 注意，这是『用户缩放』，后面会说开发者设置缩放的情况
缩放比例 我们在开发者工具中可以在这里查看缩放比例：
这里的 0.3 是相对于 理想视口 的。
在下载浏览器中，可以这么算（理想视口与视觉视口的比）：
zoom level = screen.width / window.innerwidth
禁止缩放
设置缩放
使用 initial-scale 有一个副作用：同时也会将布局视口的尺寸设置为缩放后的尺寸。所以 initial-scale=1 与 width=device-width 的效果是一样的。
完美视口 解决各种浏览器兼容问题的理想视口设置

设备像素比 在谈到像素的时候，讲到除了缩放， 屏幕是否为高密度 也会影响设备像素和css像素的关系。
在 缩放程度为100% （这个条件很重要，在后面会说到）时，他们的比例叫做 设备像素比 (device pixel ratio)：
dpr = 设备像素 / css像素
可以通过js得到： window.devicepixelratio
设备像素比也和视口有关：
dpr = 屏幕横向设备像素 / 理想视口的宽
总结 这一篇总结了移动端适配需要掌握的知识，尤其是视口的知识。下一篇介绍现在市面上的适配方案。
参考文章 ppk的移动端系列文章 screen.width is useless devicepixelratio more about devicepixelratio screen sizes 收集了很多手机的信息 下面这些文章可能也会对你有帮助：
移动前端开发之viewport的深入理解 深入了解viewport和px