資訊專欄INFORMATION COLUMN
摘要：原本在未縮放的頁面上看起來很小的尺寸，現(xiàn)在通過看上去變大了，事實上這部分的的值并沒有變化，僅僅是因為進行放大后，的的值所占的屏幕分辨率的值變大了。同理的的值并沒有發(fā)生變化但是值所占的屏幕分辨率的值變小了。
首先了解幾個概念:
物理像素：買手機的時候會有一個 n x m 的分辨率，那是屏幕的n x m個呈像的點，一個點（小方格）為一個物理像素。它是屏幕能顯示的最小粒度.
CSS像素：就是CSS里的Px，上面已經(jīng)講了是viewport中的一個小方格。
像素密度：即dpi或ppi，屏幕每英寸所占的物理像素點。
像素密度如何去計算請戳我
本文主要是說明layout viewport和visual viewport兩者的區(qū)別和在移動端上得表現(xiàn)。
當你在寫移動端頁面的時候，經(jīng)常會看到這樣一個元素信息
其中name屬性聲明了這個meta標簽元素想要聲明的內容的名稱,content就是聲明的具體內容了。
這也是這篇文章想要探討的一些問題。
不管你是用PC端還是移動端的瀏覽器去訪問一個頁面的時候。你所看到的瀏覽器的窗口就是你visual viewport（通過window.innerWidth/height獲?。瑢τ谝苿佣藖碚f，就是你通過瀏覽器所看到的那部分大小，它的度量單位是px(css中的像素)。這個visual viewport通常是可以變化的，例如你對屏幕進行縮放，這樣就可以改變visual viewport的大小，或者你移動屏幕的滾輪，這樣就可以改變visual viewport的位置。
和visual viewport相對應的另外一個viewport叫layout viewport。它就相當于一個大的box，所有的內容都要在這個box里面顯示。你通過visual viewport所看到的內容就是layout viewport上的部分內容。
visual viewport和layout viewport到底又有什么區(qū)別和聯(lián)系呢?把layout viewport想像成為一張不會變更大小或者形狀的大圖?，F(xiàn)在想像你有一個小一些的框架，你通過它來看這張大圖。（譯者：可以理解為「管中窺豹」）這個小框架的周圍被不透明的材料所環(huán)繞，這掩蓋了你所有的視線，只留這張大圖的一部分給你。你通過這個框架所能看到的大圖的部分就是visual viewport。當你保持框架（縮小）來看整個圖片的時候，你可以不用管大圖，或者你可以靠近一些（放大）只看局部。你也可以改變框架的方向，但是大圖（layout viewport）的大小和形狀永遠不會變。
當你進行頁面縮放的時，你可以想象你拿著這個小框架離這張大圖越來越近了，那么你所看到的大圖的內容也越來越少了。原本在未縮放的頁面上看起來很小的尺寸，現(xiàn)在通過viewport看上去變大了，事實上這部分的css的px值并沒有變化，僅僅是因為進行放大后，css的1px的值所占的屏幕分辨率的值變大了。
同理，當你縮小整個頁面的時候，看到大圖的內容也越來越多，同時，原本看起來很大的尺寸，現(xiàn)在再通過viewport看上去的時候又變小了。同理,css的1px的值并沒有發(fā)生變化,但是1px值所占的屏幕分辨率的值變小了。
在放大和縮小的過程中，visual viewport和layout viewport的寬，高都沒發(fā)生任何的變化,變化的僅僅就像是用戶拿著這個visual viewport去遠離或者靠近layout viewport，在遠離或者靠近的過程中，就會呈現(xiàn)出縮放的效果來。
那么layout viewport到底有多寬呢？初始狀態(tài)：
例如chrome下，初始layout viewport的寬度是980px，這個時候整個頁面是處于完全縮小的狀態(tài)下，通過visual viewport是可以看到layout viewport中的所有內容的，就好像你拿著visual viewport，離layout viewport到正好可以看到layout viewport所有內容的距離為止。
即在初始狀態(tài)下,沒有設置的情況下，layout viewport依據(jù)不同瀏覽器的特性，有一個初始值，并處于完全縮小的狀態(tài)。例如 12306官網(wǎng)
聲明了< meta name="viewport">的狀態(tài)下：
當通過meta標簽申明了viewport的寬度
layout viewport初始化的寬度就是300px,并處于完全適應于visual viewport的狀態(tài)。即通過visual viewport可以看到layout viewport中所有的內容(不存在滾輪的情況下)。
當你拿著手機屏幕進行翻轉的時候：
如果visual viewport 的寬度 > layout viewport 的寬度，那么viewport需要zoom in,以適應visual viewport的寬度
如果visual viewport 的寬度 < layout viewport的寬度，那么viewport需要zoom out，以適應visual viewport的寬度
device-width會將手機橫向物理像素/轉化系統(tǒng)(具體的換算見請戳我)作為其值，并重置相應的layout viewport的值，并適應visual viewport。
此時，不管手機屏幕是否翻轉時，visual viewport 都和 layout viewport的值相同。而不會出現(xiàn)縮放的情況。不過用戶是可以通過進行縮放操作的。
如果設置
此時用戶不能對網(wǎng)頁進行縮放。
參考文章：
兩個viewport的故事
移動適配(二)
移動適配(一)
深入了解viewport和px
在移動瀏覽器中使用viewport元標簽控制布局
Safari Web Content Guide
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/49940.html
摘要：對于，瀏覽器全屏狀態(tài)下，其的值為。的大小可以通過和，實際使用中可能會有一些兼容問題，這跟聲明有關。是為了能將電腦上的網(wǎng)頁正確的顯示到手機上。調整的大小，讓其在的查看下有最佳效果，就是我們想要的移動端適配。 上一篇博文，可算把像素這個東西講清楚了。在這篇博文里面，將繼續(xù)介紹viewport相關的內容。 很多博客都會提到PPK所講的三個viewport，有的講的比較復雜，看的云里霧里，我這...
摘要：對于，瀏覽器全屏狀態(tài)下，其的值為。的大小可以通過和，實際使用中可能會有一些兼容問題，這跟聲明有關。是為了能將電腦上的網(wǎng)頁正確的顯示到手機上。調整的大小，讓其在的查看下有最佳效果，就是我們想要的移動端適配。 上一篇博文，可算把像素這個東西講清楚了。在這篇博文里面，將繼續(xù)介紹viewport相關的內容。 很多博客都會提到PPK所講的三個viewport，有的講的比較復雜，看的云里霧里，我這...
摘要：影響著其中元素的尺寸和定位。在標準中，元素的稱為。當?shù)膶挾雀叨仁褂冒俜謹?shù)的值時，這個百分數(shù)的基準就是的尺寸。例子其中就溢出了的區(qū)域。造成以上不同的原因是，在桌面端的縮放和在移動端的縮放有不同的性質。這兩個數(shù)值的單位是設備獨立像素。 前言 本篇文章修改、整理自我以前寫的一篇文章。 在閱讀這篇文章之前，你需要了解設備像素、邏輯像素（設備獨立像素）和CSS像素的區(qū)別，見我的前一篇文章理解設備...
摘要：當你進行頁面放大的時候，原本在未縮放的頁面上看起來很小的尺寸，現(xiàn)在通過看上去變大了，事實上這部分的的值并沒有變化，僅僅是因為進行放大后，的的值所占的屏幕分辨率的值變大了。同理的的值并沒有發(fā)生變化但是值所占的屏幕分辨率的值變小了。 前言 通過上一篇我們已經(jīng)大概明白viewport是什么，但是viewport并沒有那么簡單，一包研究得身心疲憊，腦子一個不夠用哈哈，讓我們一起看看吧！ 三個v...
摘要：首先屏幕是由一個一個顯示單元組成的每一個顯示單元都是物理世界真實存在的把一個顯示單元的大小稱為一個物理像素通常我們所說的分辨率就是指一塊屏幕顯示單元的個數(shù)比如叉表示這塊屏幕由叉?zhèn)€顯示單元組成其次通常情況下個顯示單元對應計算機系統(tǒng)中的也就是說 首先 屏幕是由一個一個顯示單元組成的.1 每一個顯示單元都是物理世界真實存在的;2 把一個顯示單元的大小稱為一個物理像素;3 通常我們所說的 分辨...
閱讀 2040·2021-11-19 11:37
閱讀 729·2021-11-11 16:54
閱讀 1180·2021-11-02 14:44
閱讀 3078·2021-09-02 15:40
閱讀 2383·2019-08-30 15:44
閱讀 970·2019-08-29 11:17
閱讀 1073·2019-08-26 14:06
閱讀 1567·2019-08-26 13:47
