資訊專欄INFORMATION COLUMN
摘要：對于，瀏覽器全屏狀態下，其的值為。的大小可以通過和，實際使用中可能會有一些兼容問題，這跟聲明有關。是為了能將電腦上的網頁正確的顯示到手機上。調整的大小，讓其在的查看下有最佳效果，就是我們想要的移動端適配。
上一篇博文，可算把像素這個東西講清楚了。在這篇博文里面，將繼續介紹viewport相關的內容。
很多博客都會提到PPK所講的三個viewport，有的講的比較復雜，看的云里霧里，我這里也大概介紹一下，三個viewport主要是相對于移動端而言的。
visual viewport這個是瀏覽器給我們用的、能真正用來顯示網頁內容的區域，可以通過下面的js命令獲取：
window.innerWidth window.innerHeight
正如上篇博客所說的，前端里面能獲取到的像素基本上都是CSS像素，所以這個的單位也是CSS像素。對于iPhone X，瀏覽器全屏狀態下，其window.innerWidth的值為375。
上篇博客中還提到screen.width和screen.height，主要是用來獲取整個屏幕的大小的，而window.innerWidth和window.innerHeight只是獲取瀏覽器可用顯示區域的大小，也就是瀏覽器中間負責顯示的部分。當瀏覽器全屏時，要去掉狀態欄、標簽欄、任務欄等區域，當瀏覽器非全屏時，其值更小。由于在移動端，瀏覽器一般都是全屏的，所以大多數情況下screen.width與window.innerWidth的值相等，也有的博客中說用screen.width和screen.height來獲取visual viewport的大小，就是這個原因。
visual viewport是我們可以直觀看到的，不嚴謹的說，就是差不多等于手機屏幕的大小，偏向于一個物理概念。
layout viewport網頁最早是出現在電腦上的，上一篇博客中提到，電腦的物理像素可能比手機還要低，但是電腦的設備無關像素（或者說是分辨率吧，更嚴謹一些）是明顯大于手機的設備無關像素的，畢竟電腦的屏幕尺寸遠比手機大啊。那些在電腦上的網頁，如果沒有經過專門的優化，直接搬到手機上看，那么問題就來了，網頁會被擠得變形，相信這種問題大家都遇到過。所以呢，手機廠商為了解決這個問題，設置了一個layout viewport。
這是一個虛擬的窗口，其大小比手機屏幕大，加載網頁時，直接把HTML渲染在這個虛擬的窗口中，這樣就不會樣式錯亂了。在查看的時候，畢竟手機的visual viewport小啊，那就只能通過滾動條來看了。
做個比喻，layout viewport就是一張大白紙，HTML的內容就寫在這個大白紙上，visual viewport就是一個放大鏡，上下左右移動，可以顯示其中的一部分。
Layout viewport的大小可以通過document.documentElement.clientWidth和document.document.clientHeight，實際使用中可能會有一些兼容問題，這跟DOCTYPE聲明有關。不同瀏覽器的layout viewport大小不同，常見的有980px、1024px。
ideal viewportLayout viewport是為了能將電腦上的網頁正確的顯示到手機上。當瀏覽器拿到一個網頁時，首先會渲染到這個layout viewport里面。可是現在有很多網頁會針對手機做專門的設計，比如現在的一些H5活動頁，設計的尺寸就是在手機上看的。此時如果還是把網頁渲染到這個大的layout viewport上，實在是有點不合適了。所以，還應該有個ideal viewport，這個ideal viewport應該與手機屏幕大小的相同，確切來說，等于visual viewport的大小。把頁面渲染到這個ideal viewport里面，就能在visual viewport中完美顯示。
小結根據我的理解小結一下：
首先，我們可以假想，layout viewport和ideal viewport都是用來渲染頁面的兩個盒子，HTML頁面渲染在盒子里面，而visual viewport用來查看渲染后的結果的，相當于一個窗口。我們設置HTML的body為width:100%，那么盒子有多寬，HTML頁面就有多寬。layout viewport用來渲染電腦上的頁面，所以比較大，而ideal viewport較小，用來渲染專門針對手機設計的頁面。
然而，在瀏覽器的實現中，其實并沒有那么多盒子。就只有一個layout viewport的盒子，頁面就渲染在這個盒子中。layout viewport默認是比較大的。如果我們希望渲染到ideal viewport的盒子里面，那就只要調整這個layout viewport的大小即可，具體如何調整，將在下一節中介紹。
綜上，layout viewport用來承載HTML的渲染，visual viewport是查看渲染結果的窗口，而ideal viewport可以理解成是一種尺寸，其大小等于visual viewport。調整layout viewport的大小，讓其在visual viewport的查看下有最佳效果，就是我們想要的移動端適配。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117143.html
摘要：對于，瀏覽器全屏狀態下，其的值為。的大小可以通過和，實際使用中可能會有一些兼容問題，這跟聲明有關。是為了能將電腦上的網頁正確的顯示到手機上。調整的大小，讓其在的查看下有最佳效果，就是我們想要的移動端適配。 上一篇博文，可算把像素這個東西講清楚了。在這篇博文里面，將繼續介紹viewport相關的內容。 很多博客都會提到PPK所講的三個viewport，有的講的比較復雜，看的云里霧里，我這...
摘要：現在開始，用標簽來設置。回到應用場景，我們用這個標簽的主要目的是做移動端的適配，一般都是做一個專門為移動端設計的頁面。利用這個，就是用來設置的寬度。小結用的目的，是為了設置的大小，從而保證能在移動端設備上合適的顯示出來。 前兩篇博客，把像素和viewport的概念講清楚了。現在開始，用meta標簽來設置viewport。 meta標簽 meta標簽里面的內容，主要是提供關于這個HTML...
摘要：當你進行頁面放大的時候，原本在未縮放的頁面上看起來很小的尺寸，現在通過看上去變大了，事實上這部分的的值并沒有變化，僅僅是因為進行放大后，的的值所占的屏幕分辨率的值變大了。同理的的值并沒有發生變化但是值所占的屏幕分辨率的值變小了。 前言 通過上一篇我們已經大概明白viewport是什么，但是viewport并沒有那么簡單，一包研究得身心疲憊，腦子一個不夠用哈哈，讓我們一起看看吧！ 三個v...
摘要：移動客戶端的開發類型原生，也就是完全使用移動設備系統語言寫的客戶端，就是純，安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網頁界面，甚至PC/MAC 桌面端軟件界面；現在最常見的說法一般是指Web前端，也就是針對于網頁端開發的工作。 Web App就是以瀏覽器作為客戶端...
摘要：移動客戶端的開發類型原生，也就是完全使用移動設備系統語言寫的客戶端，就是純，安卓就是純就是用戶看到的界面體驗到的交互都是原生的。 前端是個很大的概念，我的理解是用戶能夠看到，直接接觸到的層面都算是前端，比如IOS客戶端界面，安卓客戶端界面，網頁界面，甚至PC/MAC 桌面端軟件界面；現在最常見的說法一般是指Web前端，也就是針對于網頁端開發的工作。 Web App就是以瀏覽器作為客戶端...
閱讀 826·2021-11-22 11:59
閱讀 3230·2021-11-17 09:33
閱讀 2307·2021-09-29 09:34
閱讀 1940·2021-09-22 15:25
閱讀 1954·2019-08-30 15:55
閱讀 1321·2019-08-30 15:55
閱讀 530·2019-08-30 15:53
閱讀 3346·2019-08-29 13:55
