把PC端网页放在手机端打开，会被整体缩小，为什么？如何不让它缩小？
把PC端网页放在手机端打开，会被整体缩小，为什么？如何不让它缩小？1、首先我们要知道把一个PC端的网站放到手机端需要经过两步：第一步：把电脑端的网站放到虚拟容器中。（一个概念——视口：这个虚拟容器就叫做视口。）这个虚拟容器的宽度是980px。这个980px是人为规定的，在手机出厂时就设置好的。为什么是980px？因为早期的PC端显示器宽度是980px。如果PC端网站宽度小于980px，完全可以放进
把PC端网页放在手机端打开，会被整体缩小，为什么？如何不让它缩小？
1、首先我们要知道把一个PC端的网站放到手机端需要经过两步：
-
第一步：把电脑端的网站放到虚拟容器中。（一个概念——视口：这个虚拟容器就叫做视口。）
这个虚拟容器的宽度是980px。这个980px是人为规定的，在手机出厂时就设置好的。
为什么是980px？因为早期的PC端显示器宽度是980px。
如果PC端网站宽度小于980px，完全可以放进这个虚拟容器里面。
如果PC端网站宽度等于980px，刚好可以放进这个虚拟容器里面。
如果PC端网站宽度大于980px，网站在这个虚拟容器里面就会产生一个水平滚动条。
-
第二步：把虚拟容器放到手机里。
手机的宽度在出厂时也是设置死的。如：iphone5宽度是320px，iphone6/7/8宽度是375px，iphone6/7/8plus的宽度是414px…
把一个宽度980px的虚拟容器放到宽度只有320px，375px，414px…的手机里面，这个虚拟容器就会被整体压缩变小，即整个页面就会被压缩变小，也就是页面上的每一个盒子都会被压缩变小。
直接把PC端页面在不同手机端打开效果：
2、注意：上述的320px、375px、414px，指的是手机的宽度，即设备独立像素，和我们常说的手机分辨率不是一回事！
以iPhone6为例：
-
物理像素：指的是手机或者电脑屏幕上的发光点；也叫物理像素。
如：iPhone6的分辨率为1334×750；
即iPhone6的屏幕在水平方向上有750个发光的，在垂直方向上有1334个发光点。
-
逻辑像素：指的是我们在写CSS代码时写的像素。
如：
.box { width: 100px; heigth: 100px; }
在电脑端：1个逻辑像素等于1个物理像素；然而，在手机端就不一样了。
同样以iPhone6为例：
分辨率：1334×750（水平方向上有750个发光的，垂直方向上有1334个发光点）；
但是设备独立像素是：667×375；
所以在PC端是1×1的像素块，最终映射到手机上的，是一块2×2的（4个）发光点。
因此上述的iPhone6宽度是375px，而不是750px。
3、那么如何让盒子不压缩？
我们可以设置虚拟容器的宽度。
-
在iPhone6上，人为设置虚拟容器宽度为375：
<head> <meta charset="UTF-8"> <title>Document</title> <!-- viewport: 视口or虚拟容器 --> <meta name="viewport" content="width=375"> </head> -
在不同屏幕尺寸的手机上，设置自适应手机的宽度：
<head> <meta charset="UTF-8"> <title>Document</title> <!-- device-width: 此手机的设备独立像素，即手机的宽度 --> <meta name="viewport" content="width=device-width"> </head>
设置过虚拟容器宽度自适应手机宽度之后效果：
最终结论：只要我们去写手机端的页面，就必须要设置视口大小。
各路大侠，点个赞再走呗~
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)