移动端适配方案(上)

riskers commented 8 years ago

要搞懂移动端的适配问题，就要先搞明白像素和视口。

像素

在移动端给一个元素设置 width:200px 时发生了什么？这里的px到底是多长呢？像素是网页布局的基础，但是我们一直在用直觉使用它。

其实存在两种像素：

1. 设备像素

屏幕的物理像素，任何设备屏幕的物理像素的数量都是固定不变的，单位是pt。

2. 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

这个网站列出了很多设备的分辨率和屏幕尺寸，并且计算了ppi。

视口

桌面浏览器中，浏览器窗口就是约束你的CSS布局视口（又称初始包含块）。它是所有CSS百分比宽度推算的根源，它的作用是CSS布局限制了一个最大宽度，视口的宽度和浏览器窗口宽度一致。

但是在移动端，情况就很复杂了。

布局视口

一个没有为移动端做优化的网页，会尽可能缩小网页让用户看到所有东西。这是我的手机查看博客园的样子，你也可以在Chrome中以移动开发模式看到。

浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把视口宽度设置地很大，一般在 768px ~ 1024px 之间，最常见的宽度是 980px。

所以，在手机上，视口与移动端浏览器屏幕宽度不再相关联，是完全独立的，这个浏览器厂商定的视口被称为布局视口。

布局视口我们是看不见的，只知道网页的最大宽度是 980px ，并且被缩放在了屏幕内。

可以这样设置布局视口的宽度：

<meta name="viewport" content="width=640">

媒体查询与布局视口

700px 指的是布局视口的宽度

@media (min-width: 700px){
    ...
}

document.documentElement.clientWidth/Height返回布局视口的尺寸

视觉视口

视觉视口是用户正在看到的网页的区域，大小是屏幕中CSS像素的数量。

window.innerWidth/Height返回视觉视口的尺寸

理想视口

布局视口明显对用户是不友好的，完全忽略了手机本身的尺寸。所以苹果引入了理想视口的概念，它是对设备来说最理想的布局视口尺寸。理想视口中的网页用户最理想的宽度，用户进入页面的时候不需要缩放。

现在讨论所谓的『最理想的宽度』到底是多少？其实，如果我们把布局视口的宽度改成屏幕的宽度不就不用缩放了么。可以这样设置告诉浏览器使用它的理想视口：

<meta name="viewport" content="width=device-width">

定义理想视口是浏览器的事情，并不能简单地认为是开发者定义的，开发者只能使用。

screen.width/height返回理想视口的尺寸，有严重的兼容性问题---可能返回两种值：

理想视口的尺寸（下载浏览器）
屏幕的设备像素尺寸（内置浏览器）

Screen size tests和Understanding viewport可以测试你的设备的screen.width值，同一设备的不同浏览器返回的值可能是不一样的。这一情况主要发生在默认浏览器和下载浏览器（如UC、Chrome）之间。

默认浏览器是安卓系统内置的浏览器，长下面那个样子。而且它使用的是Webkit而不是Blink。只有在更新安卓系统的时候才能更新它。直到安卓4.3，Google不再更新。

安卓webkit

而下载浏览器都返回的是理想视口尺寸。

缩放

缩放与设备像素、CSS像素的关系

缩放是在放大或缩小CSS像素，比如一个宽度为 200px 的元素无论放大，还是200个CSS像素。但是因为这些像素被放大了，所以CSS像素也就跨越了更多的设备像素。缩小则相反。

缩放与视口

缩放会影响视觉视口的尺寸

页面被用户放大，视觉视口内CSS像素数量减少；被用户缩小，视觉视口内CSS像素数量增多就行了。这个道理应该是不难想的。

用户缩放不会影响布局视口

注意，这是『用户缩放』，后面会说开发者设置缩放的情况

缩放比例

我们在开发者工具中可以在这里查看缩放比例：

查看缩放比例

这里的 0.3 是相对于理想视口的。

在下载浏览器中，可以这么算（理想视口与视觉视口的比）：

zoom level = screen.width / window.innerWidth

禁止缩放

<meta name="viewport" content="user-scalable=no">

设置缩放

<meta name="viewport" content="initial-scale=2">

使用initial-scale有一个副作用：同时也会将布局视口的尺寸设置为缩放后的尺寸。所以initial-scale=1与width=device-width的效果是一样的。

完美视口

解决各种浏览器兼容问题的理想视口设置

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

设备像素比

在谈到像素的时候，讲到除了缩放，屏幕是否为高密度也会影响设备像素和CSS像素的关系。

在缩放程度为100%（这个条件很重要，因为缩放也会影响他们）时，他们的比例叫做设备像素比(device pixel ratio)：

dpr = 设备像素 / CSS像素

可以通过JS得到： window.devicePixelRatio

设备像素比也和视口有关：

dpr = 屏幕横向设备像素 / 理想视口的宽

总结

这一篇介绍了移动端适配需要掌握的知识，先说明了移动端存在的两种像素，然后介绍了三种视口，由缩放对视口的影响引入理想视口，最后说明设备像素比。下一篇介绍现在市面上的适配方案。

参考文章

下面这些文章可能也会对你有帮助：

向我捐助 | 关于我 | 工作机会

xuejinwei commented 8 years ago

iphone5的分辨率是 640pxx1136px吧，pt，也就是逻辑“点”是：320ptx568pt。

riskers commented 8 years ago

@xuejinwei

iPhone5 的分辨率是 640x1136，单位是物理像素，是指的屏幕上有多少个像素点。又因为它的设备像素比是2，所以CSS像素是 320px x 568px。

其实Chrome开发者工具说明了一切：

xuejinwei commented 8 years ago

@riskers 明白了，前端和ios开发单位搞混了。

silenaker commented 8 years ago

文章看了两遍，第一遍没看多大明白，不过看了作者推荐的几个链接之后, 又自己用浏览器去验证基本上就明白了，感觉概念太多，不易理解，我觉得把浏览器里面的screen.width, window.innerWidth, window.devicePixelRatio这三个东西的关系搞明白就可以了, 视口的概念我觉得不要搞那么复杂，视口可以直接理解为手机屏幕，视口的宽度就是window.innerWidth, meta标签里的viewport属性，不管是对其缩放，还是直接对其宽度进行设置，最终是确定一个合理的window.innerWidth, 也就是使在不同设备上window.innerWidth的值大致接近或者相同，这样就做到了适配，手淘rem方案，它做到的就是对于iphone将window.innerWidth还原到实际物理像素宽度,而android则将window.innerWidth设置的与screen.width一致，然后用rem单位进行统一布局，用px进行针对各个设备的布局.初步理解，勿见怪

riskers commented 8 years ago

@silenaker 我是写的啰嗦了一点 :sob: