手机端页面设置视口的必要性
首先要理解把一个PC端的网站放到手机端，整体会被缩小，为什么？如何不让它缩小？
一，把一个PC端的网站放到手机端需要经过两步：
-
第一步：把电脑端的网站放到虚拟容器中。（这个虚拟容器既是视口。）
此虚拟容器的宽度设置为980px。这个980px是人为规定的，在手机出厂时就设置好的。
因为早期的PC端显示器宽度是980px。为了让980px的网站可以在手机完美显示出来，人为地 把这个虚拟容器的宽度定了980px。如果PC端网站宽度小于等于980px，完全可以放进这个虚拟容器里面。
如果PC端网站宽度大于980px，网站在这个虚拟容器里面就会产生一个水平滚动条。
-
第二步：把这个虚拟容器放到手机里。
手机的宽度在出厂时，是设置死的。如：iphone6/7/8宽度是375，如iphone5宽度是320, iphone6/7/8plus它的宽度是414… 安卓手机在出厂时，也规定死了一个宽度，可以搜索查找到相关信息。
eg：把一个大小为980px的虚拟容器放到一个300/400/500px左右的手机里，会怎么样？
答：此时，这个虚拟容器就会被压缩，页面上的每一个盒子也会被压缩。
2、物理像素与逻辑像素与手机分辨率的区别
| iphone6/7/8宽度是 | 375px |
|---|---|
| iphone5宽度是 | 320px |
| iphone6/7/8plus它的宽度是 | 414px |
上面的320px /375px / 414px，指的是手机的宽度（设备独立像素，和我们手机的分辨率不是一回事）在真实开发中，通常会以iphone6作为标准。
-
物理像素：指的是手机或者电脑屏幕上的发光点,叫物理分辨率,也叫物理像素。
eg：iPhone6的分辨率为1334×750；
即iPhone6的屏幕在水平方向上有750个发光的，在垂直方向上有1334个发光点。
-
逻辑像素：指我们在写CSS代码时写的像素。
eg：
.box { width: 100px; heigth: 100px; }
在电脑端：1个逻辑像素等于1个物理像素；在手机端却是不同的。
- eg:
写一个盒子： 200*200盒子。
在PC端：逻辑像素和物理像素一一对应
在iphone6/7/8plus上：1)盒子先放到虚拟容器（980px）中 然后压缩放到414的手机中
在iphone6/7/8上：1)盒子先放到虚拟容器（980px）中 然后压缩放到375的手机中
在iphone5上：1)盒子先放到虚拟容器（980px）中 然后压缩放到320的手机中
可以看到同一个盒子在不同的手机中，大小是不一样的。
- 同一个盒子在不同的手机中，显示的大小，取决于手机的分辨率，正确吗？
答：不正确 取决于手机的宽度，这个宽度叫设备独立像素。
以iPhone6为例：
分辨率：1334×750既是水平方向上有750个发光的，垂直方向上有1334个发光点；
但是设备独立像素是：667×375；就水平方向来说—分辨率：750 有750个发光点， 设备独立像素：375
所以在PC端是1×1的像素块，最终映射到手机上的，是2×2=4个的发光点。
3、如何不让盒子压缩？
可以人为设置虚拟容器的宽度，使其小于等于手机宽度。
eg：
200x200盒子。
人为设置虚拟容器是的宽度是414,如下代码。
1）200*200的盒子放到414的盒子，肯定可以放下
2）414的虚拟容器放到414的手机中就不会压缩。
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=414">
</head>
扫一扫
812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
