把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>
設定過虛擬容器寬度自適應手機寬度之后效果：
最終結論：只要我們去寫手機端的頁面，就必須要設定視口大小，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/282382.html
標籤：其他
上一篇：物件的凍結