成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

0基礎(chǔ)學(xué)習(xí)移動(dòng)端適配

Galence / 1434人閱讀

摘要：布局視口就是移動(dòng)設(shè)備上用來(lái)裝載我們的網(wǎng)頁(yè)的那一塊區(qū)域。最常見的寬度是。雖說(shuō)是沒有滾動(dòng)條，但是端能友好顯示的頁(yè)面，在移動(dòng)端上就顯示的很怪異。

這是關(guān)于移動(dòng)端適配的第一篇文章，這篇文章主要介紹視口以及和視口有關(guān)的meta標(biāo)簽的使用。

不管三七二十一，我們先新建一個(gè)頁(yè)面：



    
        
        這不是一個(gè)demo

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

可以看出，不管是i5/i6/i6plus下，div的寬度都為980px，這個(gè)980是什么值，為什么它好像和移動(dòng)設(shè)備無(wú)關(guān)？

其實(shí)這個(gè)980所表示的就是布局視口。
布局視口layout viewport ：就是移動(dòng)設(shè)備上用來(lái)裝載我們的網(wǎng)頁(yè)的那一塊區(qū)域。瀏覽器廠商為了讓用戶在小屏幕下網(wǎng)頁(yè)也能夠顯示地很好，所以把布局視口寬度設(shè)置地很大，一般在 768px ~ 1024px之間。不同的設(shè)備有不同的寬度。最常見的寬度是980。下圖是不同設(shè)備下布局視口的大小。

布局視口有980像素，可是我們的屏幕很小，按理說(shuō)應(yīng)該會(huì)有滾動(dòng)條才是，可實(shí)際上并沒有。這就需要?dú)w功于另一個(gè)視口：視覺視口。

視覺視口visual viewport：屏幕上顯示的頁(yè)面的一部分。聽起來(lái)很玄乎，可是你認(rèn)真看下面這張圖，你就能明白視覺視口(visual viewport)和布局視口(layout viewport)的關(guān)系了：

此時(shí)，因?yàn)槲覀兊囊曈X視口 = 布局視口，所以沒有出現(xiàn)滾動(dòng)條。雖說(shuō)是沒有滾動(dòng)條，但是pc端能友好顯示的頁(yè)面，在移動(dòng)端上就顯示的很怪異。字體很小，很難看清。比如親愛的百度：

如果想讓字體大小可讀，又該怎么辦？在此之前，我們還需要了解另一個(gè)視口，理想視口。
理想視口ideal viewport：它提供了設(shè)備上理想網(wǎng)頁(yè)的大小。這個(gè)值可以在不同設(shè)備的理想視口查到。常用的有：i5是320，i8是375，plus是414。

扯了那么多，那要如何適配呢？
相信一定會(huì)有一些前輩，他們苦口婆心地告訴你，你只要加這一行代碼就可以了：

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



    
        
        
        這不是一個(gè)demo
        
    
    
        
hello world

得到了如下的效果：


字體在三大尺寸下，顯示都算是友好，但是奇怪的是div的寬度不再是980，而是和設(shè)備的寬度有關(guān)。這一切，都得歸功于我們剛剛加的width=device-width了。

width=device-width，這句代碼的意思就是把布局視口 = 理想視口。那既然布局視口跟著變了，那剛剛的視覺視口又算咋回事啊，它現(xiàn)在的值等于多少？這不還有我們剛剛設(shè)置的另一個(gè)代碼initial-scale=1.0，它的作用就是改變視覺視口的。

initial-scale指的是縮放系數(shù)。其中有這樣的公式：

視覺視口寬度 = 理想視口寬度 / 縮放系數(shù)
縮放系數(shù) = 理想視口寬度 / 視覺視口寬度

拿i5的機(jī)型來(lái)說(shuō)，根據(jù)公式可得：
視覺視口寬度 = 320 / 1 = 320
布局視口寬度 = 320
所以：視覺視口寬度 = 布局視口寬度。頁(yè)面無(wú)滾動(dòng)條。

那如果我改變initial-scale的值會(huì)有什么反應(yīng)呢，同樣我以i5的機(jī)型做示范：

initial-scale = 0.5 「 div寬度640，頁(yè)面無(wú)滾動(dòng)條 」

initial-scale = 1 「 div寬度320，頁(yè)面無(wú)滾動(dòng)條 」

initial-scale = 1 「 div寬度320，頁(yè)面有滾動(dòng)條 」

現(xiàn)在我們好好來(lái)捋捋：

initial-scale = 0.5 「 div寬度640，頁(yè)面無(wú)滾動(dòng)條 」
視覺視口寬度 = 320 / 0.5 = 640
布局視口寬度 = 320
又因?yàn)椋阂曈X視口不能大于布局視口，所以此時(shí)，將布局視口的寬度提高等于640
總結(jié)：視覺視口 = 布局視口 = 640
initial-scale = 1 「 div寬度320，頁(yè)面無(wú)滾動(dòng)條 」
視覺視口寬度 = 320 / 1 = 320
布局視口寬度 = 320
總結(jié)：視覺視口 = 布局視口 = 320
initial-scale = 2 「 div寬度320，頁(yè)面有滾動(dòng)條 」
視覺視口寬度 = 320 / 2 = 160
布局視口寬度 = 320
總結(jié)：視覺視口 < 布局視口 頁(yè)面出現(xiàn)了滾動(dòng)條。

最后總結(jié)：

頁(yè)面是否出現(xiàn)滾動(dòng)條，看布局視口和視覺視口的大小

頁(yè)面元素的寬度取決于布局視口的大小

留個(gè)思考題：為什么在未設(shè)置的情況下，頁(yè)面無(wú)滾動(dòng)條，瀏覽器做了哪些默認(rèn)的設(shè)置？

參考：

ppk大神講解視口第一篇

ppk大神講解視口第二篇

ppk大神講解視口第三篇

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52963.html

相關(guān)文章

  • 移動(dòng)端布局與適配

    摘要：實(shí)戰(zhàn)之微信錢包騰訊服務(wù)界面網(wǎng)格布局是讓開發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對(duì)于移動(dòng)端適配，不同的公司不同的團(tuán)隊(duì)有不同的解決方案。柵格系統(tǒng)用于處理頁(yè)面多終端適配的問題。 grid實(shí)戰(zhàn)之微信錢包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動(dòng)制作一個(gè)網(wǎng)格，實(shí)際上是你將一個(gè)元素聲明為一個(gè)網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動(dòng)端頁(yè)面適配—...

    Clect 評(píng)論0 收藏0

  • 零基礎(chǔ)入門前端的修煉之道

    摘要：面對(duì)這些較高的要求，前端在開發(fā)環(huán)節(jié)中的作用也變得越來(lái)越重要因而近幾年來(lái)前端工程師備受青睞一般水平的前端工程師平均年薪可達(dá)萬(wàn)元資深前端工程師年薪高達(dá)萬(wàn)元。這種用戶體驗(yàn)的細(xì)節(jié)問題是否處理妥當(dāng)是判斷一名前端工程師是否優(yōu)秀的因素。 本文是為了給那些想要了解前端開發(fā)是什么，或者剛剛打算開始學(xué)習(xí)前端的朋友們準(zhǔn)備，希望可以幫助準(zhǔn)備入行的你;showImg(https://segmentfault.c...

    JiaXinYi 評(píng)論0 收藏0

  • 前端培訓(xùn)-初級(jí)階段-場(chǎng)景實(shí)戰(zhàn)（2019-05-23）-移動(dòng)端適配bug

    摘要：前端最基礎(chǔ)的就是。默認(rèn)構(gòu)建一個(gè)真實(shí)的設(shè)置為一個(gè)理想值追加到樹中獲取理想值和實(shí)際值的比例計(jì)算值進(jìn)行比例換算移動(dòng)端適配方案前端培訓(xùn)初級(jí)階段之移動(dòng)端適配原理參考文獻(xiàn)淘寶彈性布局方案實(shí)踐布局詳解移動(dòng)端自適應(yīng)方案 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技...

    FingerLiu 評(píng)論0 收藏0

  • 前端培訓(xùn)-初級(jí)階段-場(chǎng)景實(shí)戰(zhàn)（2019-05-23）-移動(dòng)端適配bug

    摘要：前端最基礎(chǔ)的就是。默認(rèn)構(gòu)建一個(gè)真實(shí)的設(shè)置為一個(gè)理想值追加到樹中獲取理想值和實(shí)際值的比例計(jì)算值進(jìn)行比例換算移動(dòng)端適配方案前端培訓(xùn)初級(jí)階段之移動(dòng)端適配原理參考文獻(xiàn)淘寶彈性布局方案實(shí)踐布局詳解移動(dòng)端自適應(yīng)方案 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技...

    xi4oh4o 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<