一個網頁，在電腦端和pc端，設置同樣的像素，為什么顯示的大小不同？
先直接回答一下這個問題，再講一下相關的概念；
- 移動端對這個頁面進行了縮放，這是瀏覽器幫我們做的，雖然沒有設置 meta 標簽，沒有設置initial-scale(縮放值）
瀏覽器默認，對於移動端的頁面，會先在980px寬的”幕布“上渲染，然后把這個“幕布”縮放在屏幕尺寸上，相當於meta標簽這樣設置：
<meta name="viewport" content="980, initial-scale=0.382">
0.382是如何計算出來的：設備像素寬度/布局視口寬度（幕布） 即 375/980
但是再看一下，在頁面上最寬的元素是1040px，是如何放在980px的幕布上的呢？
<meta name="viewport" content="1040, initial-scale=0.360">
計算過程同上
將這個meta標簽放在 https://lishiwangye.51240.com/ 里，發現跟瀏覽器默認一樣，縮放了，沒有滾動條
！！！移動端寫css頁面布局寬度980px以下的，都是在980px寬的幕布上先渲染然后縮放，而在pc端網頁沒有縮放，是因為瀏覽器不進行默認縮放，直接顯示
原因現在從頭捋一下
像素：
px(CSS pixels)：虛擬像素，可以理解為“直覺”像素，我要這個元素寬高10px；
dp(device pixels)：設備像素（物理像素），可以理解為實際的像素，這個寬高為10px的元素在設備中實際用了多少個物理像素點表示；
dpr(device pixels ratio)：設備像素比，公式為1px = (dpr)^2 * 1dp，可以理解為1px由多少個設備像素組成；
例如：設備 dpr=2，1px 用4個像素點表示，即2×2dp
iPhone4之前，移動端dpr都是1，即css 1px在設備上顯示1個物理像素點
dpr>=2的，稱為視網膜屏幕
viewport:
viewport原理在於：
先將頁面渲染在一個width為顯示設備默認尺寸的viewport上，如iphone6為980px；
然后將viewport等比例縮放至整個手機屏幕上；
假如元素寬高為375*667px，先將元素渲染在寬度為980px的viewport上，然后等比例縮放在整個手機屏幕上
layout viewport：布局視口（幕布）
visual viewport：視覺視口（屏幕的尺寸）
ideal viewport：理想視口（屏幕與布局相同時候的視口）