資訊專欄INFORMATION COLUMN
摘要：布局視口就是移動設(shè)備上用來裝載我們的網(wǎng)頁的那一塊區(qū)域。最常見的寬度是。雖說是沒有滾動條，但是端能友好顯示的頁面，在移動端上就顯示的很怪異。
這是關(guān)于移動端適配的第一篇文章，這篇文章主要介紹視口以及和視口有關(guān)的meta標(biāo)簽的使用。
不管三七二十一，我們先新建一個頁面：
這不是一個demo
在谷歌瀏覽器下，我們可以看到不同手機的適配情況：
可以看出，不管是i5/i6/i6plus下，div的寬度都為980px，這個980是什么值，為什么它好像和移動設(shè)備無關(guān)？
其實這個980所表示的就是布局視口。
布局視口layout viewport ：就是移動設(shè)備上用來裝載我們的網(wǎng)頁的那一塊區(qū)域。瀏覽器廠商為了讓用戶在小屏幕下網(wǎng)頁也能夠顯示地很好，所以把布局視口寬度設(shè)置地很大，一般在 768px ~ 1024px之間。不同的設(shè)備有不同的寬度。最常見的寬度是980。下圖是不同設(shè)備下布局視口的大小。
布局視口有980像素，可是我們的屏幕很小，按理說應(yīng)該會有滾動條才是，可實際上并沒有。這就需要歸功于另一個視口：視覺視口。
視覺視口visual viewport：屏幕上顯示的頁面的一部分。聽起來很玄乎，可是你認真看下面這張圖，你就能明白視覺視口(visual viewport)和布局視口(layout viewport)的關(guān)系了：
此時，因為我們的視覺視口 = 布局視口，所以沒有出現(xiàn)滾動條。雖說是沒有滾動條，但是pc端能友好顯示的頁面，在移動端上就顯示的很怪異。字體很小，很難看清。比如親愛的百度：
如果想讓字體大小可讀，又該怎么辦？在此之前，我們還需要了解另一個視口，理想視口。
理想視口ideal viewport：它提供了設(shè)備上理想網(wǎng)頁的大小。這個值可以在不同設(shè)備的理想視口查到。常用的有：i5是320，i8是375，plus是414。
扯了那么多，那要如何適配呢？
相信一定會有一些前輩，他們苦口婆心地告訴你，你只要加這一行代碼就可以了：
懷有好奇心的我們，勇敢地作出了嘗試：
這不是一個demo
hello world
得到了如下的效果：
字體在三大尺寸下，顯示都算是友好，但是奇怪的是div的寬度不再是980，而是和設(shè)備的寬度有關(guān)。這一切，都得歸功于我們剛剛加的width=device-width了。
width=device-width，這句代碼的意思就是把布局視口 = 理想視口。那既然布局視口跟著變了，那剛剛的視覺視口又算咋回事啊，它現(xiàn)在的值等于多少？這不還有我們剛剛設(shè)置的另一個代碼initial-scale=1.0，它的作用就是改變視覺視口的。
initial-scale指的是縮放系數(shù)。其中有這樣的公式：
視覺視口寬度 = 理想視口寬度 / 縮放系數(shù)
縮放系數(shù) = 理想視口寬度 / 視覺視口寬度
拿i5的機型來說，根據(jù)公式可得：
視覺視口寬度 = 320 / 1 = 320
布局視口寬度 = 320
所以：視覺視口寬度 = 布局視口寬度。頁面無滾動條。
那如果我改變initial-scale的值會有什么反應(yīng)呢，同樣我以i5的機型做示范：
initial-scale = 0.5 「 div寬度640，頁面無滾動條 」
initial-scale = 1 「 div寬度320，頁面無滾動條 」
initial-scale = 1 「 div寬度320，頁面有滾動條 」
現(xiàn)在我們好好來捋捋：
initial-scale = 0.5 「 div寬度640，頁面無滾動條 」 視覺視口寬度 = 320 / 0.5 = 640 布局視口寬度 = 320 又因為：視覺視口不能大于布局視口，所以此時，將布局視口的寬度提高等于640 總結(jié)：視覺視口 = 布局視口 = 640
initial-scale = 1 「 div寬度320，頁面無滾動條 」 視覺視口寬度 = 320 / 1 = 320 布局視口寬度 = 320 總結(jié)：視覺視口 = 布局視口 = 320
initial-scale = 2 「 div寬度320，頁面有滾動條 」 視覺視口寬度 = 320 / 2 = 160 布局視口寬度 = 320 總結(jié)：視覺視口 < 布局視口 頁面出現(xiàn)了滾動條。
最后總結(jié)：
頁面是否出現(xiàn)滾動條，看布局視口和視覺視口的大小
頁面元素的寬度取決于布局視口的大小
留個思考題：為什么在未設(shè)置的情況下，頁面無滾動條，瀏覽器做了哪些默認的設(shè)置？
參考：
ppk大神講解視口第一篇
ppk大神講解視口第二篇
ppk大神講解視口第三篇
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/52963.html
摘要：實戰(zhàn)之微信錢包騰訊服務(wù)界面網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實戰(zhàn)之微信錢包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動制作一個網(wǎng)格，實際上是你將一個元素聲明為一個網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動端頁面適配—...
摘要：面對這些較高的要求，前端在開發(fā)環(huán)節(jié)中的作用也變得越來越重要因而近幾年來前端工程師備受青睞一般水平的前端工程師平均年薪可達萬元資深前端工程師年薪高達萬元。這種用戶體驗的細節(jié)問題是否處理妥當(dāng)是判斷一名前端工程師是否優(yōu)秀的因素。 本文是為了給那些想要了解前端開發(fā)是什么，或者剛剛打算開始學(xué)習(xí)前端的朋友們準(zhǔn)備，希望可以幫助準(zhǔn)備入行的你;showImg(https://segmentfault.c...
摘要：前端最基礎(chǔ)的就是。默認構(gòu)建一個真實的設(shè)置為一個理想值追加到樹中獲取理想值和實際值的比例計算值進行比例換算移動端適配方案前端培訓(xùn)初級階段之移動端適配原理參考文獻淘寶彈性布局方案實踐布局詳解移動端自適應(yīng)方案 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技...
摘要：前端最基礎(chǔ)的就是。默認構(gòu)建一個真實的設(shè)置為一個理想值追加到樹中獲取理想值和實際值的比例計算值進行比例換算移動端適配方案前端培訓(xùn)初級階段之移動端適配原理參考文獻淘寶彈性布局方案實踐布局詳解移動端自適應(yīng)方案 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技...
閱讀 2509·2021-11-16 11:44
閱讀 923·2021-09-10 11:16
閱讀 2284·2019-08-30 15:54
閱讀 1197·2019-08-30 15:53
閱讀 1967·2019-08-30 13:00
閱讀 673·2019-08-29 17:07
閱讀 3569·2019-08-29 16:39
閱讀 3206·2019-08-29 13:30
