请先确保阅读第一篇了解概念：图文并茂带你弄懂物理分辨率、分辨率、物理像素、逻辑像素、dpr、ppi，否则此文可能阅读困难。

目录

不得不说的屏幕尺寸

必须说说窗户尺寸

视口viewport问题引出

放大

缩小

hr-toc" />

不得不说的屏幕尺寸

这里我得盗一下图，来好好说说这些概念

简单的说就是你的显示器的分辨率用物理像素描述的，而横向和纵向的分辨率值可以用screen.width/height打印出来。它们是显示器的功能，而不是浏览器的功能。不管窗口放大缩小，screen.width/height是不会变的。（IE7、8是例外，均以CSS像素为单位进行测量）。除非设置分辨率，让LED液晶板重新划分物理像素点，否则就认为分辨率不变。

必须说说窗户尺寸

浏览器窗口里面的宽度和高度可以用window.innerWidth/innerHeight描述，单位是CSS像素。

既然说是CSS像素，肯定缩放之后会有变化，如图

Console窗口的改变相当于改变浏览器显示大小。如果放大，窗口中的可用空间会减少，并 window.innerWidth/Height通过减少来反映出来。（Opera是一个例外，Opera window.innerWidth/Height 不会在用户放大时减小：它们以设备像素为单位进行度量。这在台式机上很烦人，但在移动设备上却很致命）

注意：测量的宽度和高度包括滚动条。它们也被视为内部窗口的一部分，这主要是出于历史原因。

视口viewport问题引出

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。

如果有这么一个页面，PC端显示如下，图片大小是200px*200px(CSS像素)

移动端

我们打开标尺Show rulers发现，物理视口的物理像素是375px。若不清楚物理像素和CSS像素可见前篇图文并茂带你弄懂分辨率、物理像素、逻辑像素、dpr、ppi

它将PC页面缩小到一个手机屏幕的可视范围，原理是怎么样的呢？我们用下面的图来说说

移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），这里是980px。这个是CSS像素。横向980个CSS像素必须显示在横向375个物理像素点上。这样1个物理像素在横向上不得不显示980/375≈2.61个CSS像素，所以1个物理像素显示2.61×2.61个CSS像素，也就是我们看到的缩小效果。缩小之后一个物理像素现在重叠了2.61*2.61≈6.8个CSS像素，强行缩小显示在移动端，看起来会太小，体验很不友好。

放大

现在我们加上meta标签，初始缩放比为1（等于没有缩放），比如iphone6 的初始宽度的物理像素为375px，1CSS像素占1个物理像素，所以CSS像素最大显示也是375px。

下图是显示200px×200px(CSS像素)的图片，在缩放比为1的显示情况。

右下角盒子模型中的像素是CSS像素，切记

我们改为，现在缩放比是2，缩放的是CSS像素。我要好好说说这个例子。

原来1个CSS像素表示1个物理像素，此时横向上1个CSS像素表示2个物理像素。以横向为例，看起来被截断了，要显示完整宽度需要视口宽度是400px(物理像素)，这里只有375个物理像素点，故被"截断"。

横向的解释：可以看到因为放到了2倍，所以横向的375px变为了187.5px(取整为187)，也就是说原来横向375个物理像素点需要375个CSS像素点，现在375个物理像素点只需要187个CSS像素点就可以覆盖，横向1个CSS像素就覆盖了2个物理像素点。

纵向的解释：纵向也是放大2倍，原来缩放比为1的时候纵向只需要290个物理像素，现在纵向需要580个物理像素，纵向的1个CSS像素覆盖了2个物理像素点。这里html的高度(CSS像素)始终是290px，放大后CSS像素没变，而纵向覆盖的物理像素变成了2倍。

缩小

初始缩放比为0.5

如果初始缩放比为1，那么布局的宽度就是和视口viewport的宽度是一样的，即initial-scale=1等同于width%3Ddevice-width%E7%9A%84%E9%97%AE%E9%A2%98">viewport" cOntent=">