本文預(yù)計閱讀時間：5分鐘。

如果你知道，就別看了，這篇文章是新手向。

我剛開始開發(fā)前端頁面的時候，發(fā)現(xiàn)了一個問題，就是在html的header標(biāo)簽里，總會出現(xiàn)這么一行代碼：

<meta name="viewport" content="width=device-width, initial-scale=1>

這個viewport的meta標(biāo)簽我感覺很神秘，因為每次加上這個標(biāo)簽以后，我的網(wǎng)頁看起來就會有一些不大不小的變化（當(dāng)我選擇手機模式的時候）。

你屏幕的分辨率是多少？

換句話問：你屏幕的橫向有多少個像素?我的mac pro 是1440px。這個值我可以通過js取得：

var screenWidth = window.screen.width;//1440，肯定是1440

這個值既然是我屏幕的寬度，那么就說明無論我怎么縮放瀏覽器，這個值都是不變的，請看圖。

全屏

不是全屏

你肯定想說，這么簡單的事情我當(dāng)然知道。

那么問題是，你的手機屏幕是多少像素？

好吧，我用的是iPhone6s，我上蘋果官網(wǎng)查一下，官網(wǎng)說是750px。

image.png

那么你覺得如果把這個網(wǎng)頁放在iPhone6s上運行，screenWidth的值是多少？750px？

如果你真的這么覺得，只能說，你可以感謝我的這篇文章了，讓你少爬了一個坑。事實上，顯示的值是……375。

image.png

我曹，為什么？

因為在移動設(shè)備上，描述寬度用的不是px，而是pt。英文全稱是point，就是“點”，可以認(rèn)為，在手機上，屏幕被劃分成了橫向375個點。

image.png

瀏覽器的窗口究竟有多大？

下面這段代碼可以獲取瀏覽器窗口的大小，顯然，隨著瀏覽器的縮放，這個值是會變化的。

var browserWidth = window.innerWidth;

image.png

image.png

其實瀏覽器寬度就是他媽的viewport寬度。

這是一些不負(fù)責(zé)任的博主胡逼翻譯造下的孽。viewport，視口。說人話就是：瀏覽器大小。（如果你也很討厭那種說來說去不說人話的文章，請給我點個贊）

viewport這個meta標(biāo)簽是干什么的？

首先，這個標(biāo)簽只是針對移動設(shè)備。
然后，當(dāng)你加上這個標(biāo)簽，你的瀏覽器寬度就可以自由設(shè)置了。
通常來說，會利用這個標(biāo)簽，將手機瀏覽器的寬度設(shè)置為手機屏幕的寬度，以6s為例子，就是講瀏覽器寬度設(shè)置為375pt。

image.png

這個時候，我畫一個寬度為375px的方塊，就會正好填滿手機屏幕

image.png

可是不會填滿電腦的瀏覽器

image.png

所以，電腦端的1px對應(yīng)著手機端的1pt，每個手機的pt都是手機廠商給指定好的，比如小米4是360，iPhoneX是375，iPad是768,等等……

如果不加上viewport的標(biāo)簽，手機端的瀏覽器像素是多少？

如果你想實驗的話可以自己試試，我可以告訴你我的結(jié)果：iPhone6s瀏覽器會顯示：980像素。因為viewport的默認(rèn)值是手機safari出廠時候設(shè)定好的。如果感興趣的話可以去各個手機廠商的官網(wǎng)找一找，他們默認(rèn)的設(shè)置是多少。