国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

移動(dòng)端適配之二：visual viewport、layout viewport和ideal view

junbaor / 1669人閱讀

摘要：對(duì)于，瀏覽器全屏狀態(tài)下，其的值為。的大小可以通過和，實(shí)際使用中可能會(huì)有一些兼容問題，這跟聲明有關(guān)。是為了能將電腦上的網(wǎng)頁正確的顯示到手機(jī)上。調(diào)整的大小，讓其在的查看下有最佳效果，就是我們想要的移動(dòng)端適配。

上一篇博文，可算把像素這個(gè)東西講清楚了。在這篇博文里面，將繼續(xù)介紹viewport相關(guān)的內(nèi)容。

很多博客都會(huì)提到PPK所講的三個(gè)viewport，有的講的比較復(fù)雜，看的云里霧里，我這里也大概介紹一下，三個(gè)viewport主要是相對(duì)于移動(dòng)端而言的。

visual viewport

這個(gè)是瀏覽器給我們用的、能真正用來顯示網(wǎng)頁內(nèi)容的區(qū)域，可以通過下面的js命令獲取：

window.innerWidth
window.innerHeight

正如上篇博客所說的，前端里面能獲取到的像素基本上都是CSS像素，所以這個(gè)的單位也是CSS像素。對(duì)于iPhone X，瀏覽器全屏狀態(tài)下，其window.innerWidth的值為375。

上篇博客中還提到screen.width和screen.height，主要是用來獲取整個(gè)屏幕的大小的，而window.innerWidth和window.innerHeight只是獲取瀏覽器可用顯示區(qū)域的大小，也就是瀏覽器中間負(fù)責(zé)顯示的部分。當(dāng)瀏覽器全屏?xí)r，要去掉狀態(tài)欄、標(biāo)簽欄、任務(wù)欄等區(qū)域，當(dāng)瀏覽器非全屏?xí)r，其值更小。由于在移動(dòng)端，瀏覽器一般都是全屏的，所以大多數(shù)情況下screen.width與window.innerWidth的值相等，也有的博客中說用screen.width和screen.height來獲取visual viewport的大小，就是這個(gè)原因。

visual viewport是我們可以直觀看到的，不嚴(yán)謹(jǐn)?shù)恼f，就是差不多等于手機(jī)屏幕的大小，偏向于一個(gè)物理概念。

layout viewport

網(wǎng)頁最早是出現(xiàn)在電腦上的，上一篇博客中提到，電腦的物理像素可能比手機(jī)還要低，但是電腦的設(shè)備無關(guān)像素（或者說是分辨率吧，更嚴(yán)謹(jǐn)一些）是明顯大于手機(jī)的設(shè)備無關(guān)像素的，畢竟電腦的屏幕尺寸遠(yuǎn)比手機(jī)大啊。那些在電腦上的網(wǎng)頁，如果沒有經(jīng)過專門的優(yōu)化，直接搬到手機(jī)上看，那么問題就來了，網(wǎng)頁會(huì)被擠得變形，相信這種問題大家都遇到過。所以呢，手機(jī)廠商為了解決這個(gè)問題，設(shè)置了一個(gè)layout viewport。

這是一個(gè)虛擬的窗口，其大小比手機(jī)屏幕大，加載網(wǎng)頁時(shí)，直接把HTML渲染在這個(gè)虛擬的窗口中，這樣就不會(huì)樣式錯(cuò)亂了。在查看的時(shí)候，畢竟手機(jī)的visual viewport小啊，那就只能通過滾動(dòng)條來看了。

做個(gè)比喻，layout viewport就是一張大白紙，HTML的內(nèi)容就寫在這個(gè)大白紙上，visual viewport就是一個(gè)放大鏡，上下左右移動(dòng)，可以顯示其中的一部分。

Layout viewport的大小可以通過document.documentElement.clientWidth和document.document.clientHeight，實(shí)際使用中可能會(huì)有一些兼容問題，這跟DOCTYPE聲明有關(guān)。不同瀏覽器的layout viewport大小不同，常見的有980px、1024px。

ideal viewport

Layout viewport是為了能將電腦上的網(wǎng)頁正確的顯示到手機(jī)上。當(dāng)瀏覽器拿到一個(gè)網(wǎng)頁時(shí)，首先會(huì)渲染到這個(gè)layout viewport里面?？墒乾F(xiàn)在有很多網(wǎng)頁會(huì)針對(duì)手機(jī)做專門的設(shè)計(jì)，比如現(xiàn)在的一些H5活動(dòng)頁，設(shè)計(jì)的尺寸就是在手機(jī)上看的。此時(shí)如果還是把網(wǎng)頁渲染到這個(gè)大的layout viewport上，實(shí)在是有點(diǎn)不合適了。所以，還應(yīng)該有個(gè)ideal viewport，這個(gè)ideal viewport應(yīng)該與手機(jī)屏幕大小的相同，確切來說，等于visual viewport的大小。把頁面渲染到這個(gè)ideal viewport里面，就能在visual viewport中完美顯示。

小結(jié)

根據(jù)我的理解小結(jié)一下：

首先，我們可以假想，layout viewport和ideal viewport都是用來渲染頁面的兩個(gè)盒子，HTML頁面渲染在盒子里面，而visual viewport用來查看渲染后的結(jié)果的，相當(dāng)于一個(gè)窗口。我們?cè)O(shè)置HTML的body為width:100%，那么盒子有多寬，HTML頁面就有多寬。layout viewport用來渲染電腦上的頁面，所以比較大，而ideal viewport較小，用來渲染專門針對(duì)手機(jī)設(shè)計(jì)的頁面。

然而，在瀏覽器的實(shí)現(xiàn)中，其實(shí)并沒有那么多盒子。就只有一個(gè)layout viewport的盒子，頁面就渲染在這個(gè)盒子中。layout viewport默認(rèn)是比較大的。如果我們希望渲染到ideal viewport的盒子里面，那就只要調(diào)整這個(gè)layout viewport的大小即可，具體如何調(diào)整，將在下一節(jié)中介紹。

綜上，layout viewport用來承載HTML的渲染，visual viewport是查看渲染結(jié)果的窗口，而ideal viewport可以理解成是一種尺寸，其大小等于visual viewport。調(diào)整layout viewport的大小，讓其在visual viewport的查看下有最佳效果，就是我們想要的移動(dòng)端適配。

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

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

相關(guān)文章

  • 移動(dòng)端適配之二：visual viewport、layout viewport和ideal view

    摘要：對(duì)于，瀏覽器全屏狀態(tài)下，其的值為。的大小可以通過和，實(shí)際使用中可能會(huì)有一些兼容問題，這跟聲明有關(guān)。是為了能將電腦上的網(wǎng)頁正確的顯示到手機(jī)上。調(diào)整的大小，讓其在的查看下有最佳效果，就是我們想要的移動(dòng)端適配。 上一篇博文，可算把像素這個(gè)東西講清楚了。在這篇博文里面，將繼續(xù)介紹viewport相關(guān)的內(nèi)容。 很多博客都會(huì)提到PPK所講的三個(gè)viewport，有的講的比較復(fù)雜，看的云里霧里，我這...

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

  • 移動(dòng)端適配之三：使用meta標(biāo)簽設(shè)置viewport

    摘要：現(xiàn)在開始，用標(biāo)簽來設(shè)置?；氐綉?yīng)用場(chǎng)景，我們用這個(gè)標(biāo)簽的主要目的是做移動(dòng)端的適配，一般都是做一個(gè)專門為移動(dòng)端設(shè)計(jì)的頁面。利用這個(gè)，就是用來設(shè)置的寬度。小結(jié)用的目的，是為了設(shè)置的大小，從而保證能在移動(dòng)端設(shè)備上合適的顯示出來。 前兩篇博客，把像素和viewport的概念講清楚了。現(xiàn)在開始，用meta標(biāo)簽來設(shè)置viewport。 meta標(biāo)簽 meta標(biāo)簽里面的內(nèi)容，主要是提供關(guān)于這個(gè)HTML...

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

  • 【移動(dòng)端web開發(fā)】（二）深入viewport

    摘要：當(dāng)你進(jìn)行頁面放大的時(shí)候，原本在未縮放的頁面上看起來很小的尺寸，現(xiàn)在通過看上去變大了，事實(shí)上這部分的的值并沒有變化，僅僅是因?yàn)檫M(jìn)行放大后，的的值所占的屏幕分辨率的值變大了。同理的的值并沒有發(fā)生變化但是值所占的屏幕分辨率的值變小了。 前言 通過上一篇我們已經(jīng)大概明白viewport是什么，但是viewport并沒有那么簡(jiǎn)單，一包研究得身心疲憊，腦子一個(gè)不夠用哈哈，讓我們一起看看吧！ 三個(gè)v...

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

  • Web移動(dòng)開發(fā)基本概念

    摘要：移動(dòng)客戶端的開發(fā)類型原生，也就是完全使用移動(dòng)設(shè)備系統(tǒng)語言寫的客戶端，就是純，安卓就是純就是用戶看到的界面體驗(yàn)到的交互都是原生的。 前端是個(gè)很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網(wǎng)頁界面，甚至PC/MAC 桌面端軟件界面；現(xiàn)在最常見的說法一般是指Web前端，也就是針對(duì)于網(wǎng)頁端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...

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

  • Web移動(dòng)開發(fā)基本概念

    摘要：移動(dòng)客戶端的開發(fā)類型原生，也就是完全使用移動(dòng)設(shè)備系統(tǒng)語言寫的客戶端，就是純，安卓就是純就是用戶看到的界面體驗(yàn)到的交互都是原生的。 前端是個(gè)很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網(wǎng)頁界面，甚至PC/MAC 桌面端軟件界面；現(xiàn)在最常見的說法一般是指Web前端，也就是針對(duì)于網(wǎng)頁端開發(fā)的工作。 Web App就是以瀏覽器作為客戶端...

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

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

0條評(píng)論

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