0基礎學習移動端適配

這是關於移動端適配的第一篇文章，這篇文章主要介紹視口以及和視口有關的meta標籤的使用。

不管三七二十一，我們先新建乙個頁面：

在谷歌瀏覽器下，我們可以看到不同手機的適配情況：

可以看出，不管是i5/i6/i6plus下，div的寬度都為980px，這個980是什麼值，為什麼它好像和移動裝置無關？

其實這個980所表示的就是布局視口。

布局視口layout viewport：就是移動裝置上用來裝載我們的網頁的那一塊區域。瀏覽器廠商為了讓使用者在小螢幕下網頁也能夠顯示地很好，所以把布局視口寬度設定地很大，一般在 768px ~ 1024px之間。不同的裝置有不同的寬度。最常見的寬度是980。下圖是不同裝置下布局視口的大小。

布局視口有980畫素，可是我們的螢幕很小，按理說應該會有滾動條才是，可實際上並沒有。這就需要歸功於另乙個視口：視覺視口。

視覺視口visual viewport：螢幕上顯示的頁面的一部分。聽起來很玄乎，可是你認真看下面這張圖，你就能明白視覺視口(visual viewport)和布局視口(layout viewport)的關係了：

如果想讓字型大小可讀，又該怎麼辦？在此之前，我們還需要了解另乙個視口，理想視口。

理想視口ideal viewport：它提供了裝置上理想網頁的大小。這個值可以在不同裝置的理想視口查到。常用的有：i5是320，i8是375，plus是414。

扯了那麼多，那要如何適配呢？

相信一定會有一些前輩，他們苦口婆心地告訴你，你只要加這一行**就可以了：

懷有好奇心的我們，勇敢地作出了嘗試：

hello world

得到了如下的效果：

字型在三大尺寸下，顯示都算是友好，但是奇怪的是div的寬度不再是980，而是和裝置的寬度有關。這一切，都得歸功於我們剛剛加的width=device-width了。

width=device-width，這句**的意思就是把布局視口 = 理想視口。那既然布局視口跟著變了，那剛剛的視覺視口又算咋回事啊，它現在的值等於多少？這不還有我們剛剛設定的另乙個**initial-scale=1.0，它的作用就是改變視覺視口的。

initial-scale指的是縮放係數。其中有這樣的公式：

視覺視口寬度 = 理想視口寬度 / 縮放係數

縮放係數 = 理想視口寬度 / 視覺視口寬度

拿i5的機型來說，根據公式可得：

視覺視口寬度 = 320 / 1 = 320

布局視口寬度 = 320

所以：視覺視口寬度 = 布局視口寬度。頁面無滾動條。

那如果我改變initial-scale的值會有什麼反應呢，同樣我以i5的機型做示範：

initial-scale = 0.5 「 div寬度640，頁面無滾動條 」

initial-scale = 1 「 div寬度320，頁面無滾動條 」

initial-scale = 1 「 div寬度320，頁面有滾動條 」

現在我們好好來捋捋：

initial-scale = 0.5 「 div寬度640，頁面無滾動條」視覺視口寬度 = 320 / 0.5 = 640 布局視口寬度 = 320 又因為：視覺視口不能大於布局視口，所以此時，將布局視口的寬度提高等於640 總結：視覺視口 = 布局視口 = 640

initial-scale = 1 「 div寬度320，頁面無滾動條 」
視覺視口寬度 = 320 / 1 = 320
布局視口寬度 = 320
總結：視覺視口 = 布局視口 = 320

initial-scale = 2 「 div寬度320，頁面有滾動條 」
視覺視口寬度 = 320 / 2 = 160
布局視口寬度 = 320
總結：視覺視口 < 布局視口 頁面出現了滾動條。

最後總結：

頁面是否出現滾動條，看布局視口和視覺視口的大小頁面元素的寬度取決於布局視口的大小

留個思考題：為什麼在未設定的情況下，頁面無滾動條，瀏覽器做了哪些預設的設定？

參考：ppk大神講解視口第一篇

ppk大神講解視口第二篇

ppk大神講解視口第三篇