本文探讨了将PC端网页移植到手机端时出现的缩放问题。手机端有一个固定宽度的虚拟容器（通常为980px），用于容纳网页内容。当网页宽度不匹配时，会导致页面缩放。手机的宽度（设备独立像素）不同，虚拟容器会被压缩，影响显示效果。视口的概念被引入，其初始宽度设定为980px源于早期电脑网站的普遍宽度。通过设置CSS中的视口宽度，可以避免内容在不同设备上被压缩。
-
把一个PC端的网页放到手机端时，为什么整体会被缩小？
首先，把PC端的网站放到手机端，分两步：
- 把电脑端的网站放到虚拟容器中，这个虚拟容器的宽度是980px，这个980是人为规定的，手机在出厂时就设置好了。如果电脑端的网站整体的宽度也是980px，就会正好放到这个虚拟容器。如果电脑端的网站宽度大于980px，你的网站在这个虚拟容器中就会产生一个水平滚动条。如果电脑端的网站宽度小于980px，这个虚拟容器也可以放下。
- 第二步，就是把这个虚拟容器放到手机里 ，如果手机的宽度也是980，正好把这个虚拟容器放下。不幸的是，手机的宽度在出厂时，也是设置死的。如：iphone6/7/8宽度是375，如果iphone5宽度是320，如iphone6/7/8plus它的宽度是414… 安卓手机在出厂时，也规定死了一个宽度，你自己可以去查一下，你手机的宽度。
那么，要把一个980的虚拟容器放到一个300 400 500左右的手机里，会怎么样？
此时，这个虚拟容器就会被压缩，页面上的每一个盒子也会被压缩。
以上的320px 、375px、414px均指的是手机的宽度（叫做设备独立像素），和手机的分辨率不是一回事
**视口：**上面所说的虚拟容器就是视口。
为什么视口人为设置是980px？
很早之前，电脑分辨率较低，写一个电脑端网站基本都是980px，为了让980px的网站可以在手机中完整显示出来，认为定义成980px，一直沿用。
最低0.47元/天 解锁文章
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
