网页如何缩小苹果电脑网页如何缩小( 二 ) _经验知识

理想视口
布局视口明显对用户是不友好的，完全忽略了手机本身的尺寸。所以苹果引入了理想视口的概念，它是对设备来说较理想的布局视口尺寸。理想视口中的网页用户较理想的宽度，用户进入页面的时候不需要缩放。
现在讨论所谓的『较理想的宽度』到底是多少？其实，如果我们把布局视口的宽度改成屏幕的宽度不就不用缩放了么。可以这样设置告诉浏览器使用它的理想视口：
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width">
定义理想视口是浏览器的事情，并不能简单地认为是开发者定义的，开发者只能使用。
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
zoom level = screen.width / window.innerWidth
禁止缩放
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="user-scalable=no">
设置缩放
<meta name="viewport" content="initial-scale=2">
<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">
<meta name="viewport" content="width=device-width,initial-scale=1">
设备像素比
在谈到像素的时候，讲到除了缩放，屏幕是否为高密度也会影响设备像素和CSS像素的关系。
在缩放程度为100%（这个条件很重要，因为缩放也会影响他们）时，他们的比例叫做设备像素比(device pixel ratio)：
dpr = 设备像素 / CSS像素
dpr = 设备像素 / CSS像素
可以通过JS得到： window.devicePixelRatio
设备像素比也和视口有关：
dpr = 屏幕横向设备像素 / 理想视口的宽
dpr = 屏幕横向设备像素 / 理想视口的宽
总结
这一篇介绍了移动端适配需要掌握的知识，先说明了移动端存在的两种像素，然后介绍了三种视口，由缩放对视口的影响引入理想视口，较后说明设备想告诉比。下一篇介绍现在市面上的适配方案。

网页如何缩小 苹果电脑网页如何缩小( 二 )

网页如何缩小苹果电脑网页如何缩小( 二 )