viewport 的理解

UsherChen 發布于2019-08-29 12:47 / 1848人閱讀

摘要：首先屏幕是由一個一個顯示單元組成的每一個顯示單元都是物理世界真實存在的把一個顯示單元的大小稱為一個物理像素通常我們所說的分辨率就是指一塊屏幕顯示單元的個數比如叉表示這塊屏幕由叉個顯示單元組成其次通常情況下個顯示單元對應計算機系統中的也就是說

首先

屏幕是由一個一個顯示單元組成的.
1 每一個顯示單元都是物理世界真實存在的;
2 把一個顯示單元的大小稱為一個"物理像素";
3 通常我們所說的 "分辨率", 就是指一塊屏幕顯示單元的個數, 比如 750 叉 1334, 表示這塊屏幕由 750叉1334 個顯示單元組成

其次

通常情況下, 1 個顯示單元對應計算機系統中的 1px.
也就是說, 如果你設置了一個元素的 height:100px; 在屏幕中會有 100個顯示單元來渲染它.
后來出現了一種情況
在相同大小的屏幕下,
屏幕分辨率不一樣, 一個分辨率是 A, 而另外一個分辨率是 2A --- 因為我們可以把顯示單元做的更小了

這種情況的出現, 有如下的影響

如果我們維持著: 計算機系統中的 1px, 對應物理上的 1個顯示單元.
那么同樣一個頁面, 在 A 顯示正常, 在 2A 的情景下面, 就只會顯示一半.

這種情況肯定是不可以的.所以我們需要針對這種情況做處理: 瀏覽器提供了一個 devicePixelRatio(設備像素比) 的屬性, 用來標記:

標準顯示單元的大小/當前設備的顯示單元的大小

并且明確兩條規則:

1px 始終對應 1個顯示單元

標準的 1個顯示單元大小為 x, 其他的顯示單元, 可能是 1/2x, 1/3x

我們可以通過判斷這個值, 來調整我們使用的 px 的大小,
比如:

devicePixelRatio = 1 的設備中, 元素a 的寬度為 100px;
devicePixelRatio = 2 的設備中, 元素a 的寬度為 200px;

ok, 那么我們來搞.
根據不同的 devicePixelRatio 來調整元素的樣式.

    var box = document.querySelector(".box");
    
    var height = parseInt(getComputedStyle(box).height);
    var width = parseInt(getComputedStyle(box).width);

    box.style.height = height * parseInt(window.devicePixelRatio) + "px";
    box.style.width = width * parseInt(window.devicePixelRatio) + "px";

這僅僅是一個元素的兩個屬性, 1000個元素, 每個元素 5 個屬性, 就可以讓你哭掉了.
所以這種處理方式肯定是不可以的.

然后我們發現了 rem 單位.
它的簡單解釋:

當你給某個元素A 設置了 height:2rem 的時候
它會找到根節點(html) 的 font-size 值, 比如是 16px
然后拿 16 * 2 = 32px
作為元素A 的最終 height.

這個就可以利用了

讓元素使用 rem 作單位

然后控制根元素的 font-size 值, 在不同的 devicePixelRatio 下面的時候, 呈現不同的值

比如:
    devicePixelRatio = 1, font-size(root) = 100px;
    devicePixelRatio = 2, font-size(root) = 200px;

元素在這個時候, 就會自動響應大小的變化.

好, 開始搞:

    var fontSize = 100 * parseInt(window.devicePixelRatio) + "px";
    document.documentElement.style.fontSize = fontSize;

嗯, 結果還是不錯的, 在不同的分辨率下面, 我們也能實現頁面相同了.
然后你會總是覺得, pc 上面的 100px, 和你 devicePixelRatio=2 的時候的 200px
的大小不一致的, 按道理來說應該是一致的.

的確不一致.

先明確一個概念
瀏覽器可視區域(visual viewport)
我們之前說了 "計算機系統中的 1px 始終對應 1個物理顯示單元"
那么對應 750*1334 分辨率的屏幕, 我們同樣可以這么描述它:

屏幕的大小為 750px*1334px.

前面已經說過了, 相同物理尺寸的屏幕, 分辨率可能不同, 因為顯示單元的個數不同.
所以這里的 750px, 可能僅僅是標準下面的 375px;

另外一個概念:ideal viewport
它表示的是說:

當前設備, 使用標準顯示單元為單位的時候的大小.

比如說 750*x 的分辨率, devicePixelRatio = 2,
那么它在標準顯示單元下面, 寬度就是 375px * x/2

最后我們提一下 layout viewport, 這是為什么大小不一致的原因:

歷史:

從 iPhone 發布前夕說起, 開發人員發現, 原本為 pc 開發的網頁
在 iPhone 上面顯示不全, 這部分可以通過滾動條來解決.
但是使用 百分比布局的頁面就坑爹了, 原本在 pc 端瀏覽器上擁有
的 20% 在 iPhone 上面就一點點了, 布局完全亂了, 坑啊.
為了解決這個問題, 開發人員提出了一個的新的概念: "layout viewport"

layout viewport的默認大小為 980px, 并且默認縮放到和 visual viewport 區域一般大小.
在這種情況下, 我們可以計算出layout viewport下,
一個 100px 寬度的元素, 對應的 visual viewport 下面的寬度 x

layout viewport / visual viewport = ele-width(layout viewport) / x

也就是

x = ele-width(layout viewport) * (layout viewport / visual viewport);

ideal viewport 下面的寬度, 只要再除以 devicePixelRatio 即可.

很明顯的看出來:

width(layout viewport) = width(visual viewport) 的時候, 兩個 viewport 中的元素寬度值
是相等的.

width(visual viewport) / devicePixelRatio = ideal viewport 中的元素的大小.

而我們的最終追求, 就是
當你寫下 100px 的時候, 在任何 devicePixelRatio 下面的大小都是一致的.
要做到這一點, 就要做到它們的 ideal viewport 下面的大小始終一致的.

而一個元素在 ideal viewport 下的大小的計算公式為:

( ele-width(layout viewport) * (layout viewport / visual viewport) ) / devicePixelRatio;

因為不同的設備的 visual viewport 的值是不同的, 我們可以控制讓 layout viewport 的大小始終
等于 visual viewport, 這樣比例始終為 1

devicePixelRatio 在不同的設備中有不同

假設 ele-width(ideal viewport) = x;
devicePixelRatio = n;
那么 ele-width(layout viewport) = nx;

所以我們只要保證, ele-width 的寬度, 始終為 nx 即可, 因為通常情況下我們是知道 x 的.

how?

控制 layout viewport 的大小始終等于 visual viewport
通過 meta name="viewport" 的 content 的 initial-scale 來控制.

initial-scale = 1 , layout viewport 的寬度為 375 (同ideal viewport)
initial-scale = 2 , layout viewport 的寬度為 188
initial-scale = 0.5, layout viewport 的寬度為 750;

所以得到的結論:

當 initial-scale 的值為 1/devicePixelRatio 的時候, 
width(layout viewport) = width(visual viewport)

2 通過 rem, 以及根據不同的 devicePixelRatio 設置根節點的 font-size 值, 來控制 nx 的值的大小.
然后需要給出一份基準值:

在 750(visual viewport), devicePixelRatio = 2 的時候, 
root(font-size) = 200px;

如果都做到這里了, 那么至少可以達到:
在不同的 devicePixelRatio 下面元素的大小都是一致的.

但是依舊存在一個問題, 當前頁面是基于 750 (visual viewport) 定義的, 也就是說
當你的設備實際上只有 640(visual viewport) 的時候,

你的整個頁面還是 750px, 就會出現滾動條.

所以我們想要等比縮放一下.

如何操作?
直接等比縮放一下 root(font-size) 的值:

    750/200 = 640/x
    x = 640 / (750 / 200)

云服務器 GPU云服務器 viewport viewport布局云計算的理解 cdn的理解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112138.html

對于移動設備頁面尺寸的理解

摘要：為移動設備制作前端頁面，往往會遇到很多令人迷惑的情況，本文中，我整理了一些相關的概念和方法，與大家分享一下。所以現代針對移動端的網頁設計或者響應式設計通常采用的方法是，精簡頁面內容，放大視覺元素，避免體驗不好的縮放和移動頁面。為移動設備制作前端頁面，往往會遇到很多令人迷惑的情況，本文中，我整理了一些相關的概念和方法，與大家分享一下。設備像素和CSS像素 css像素是固定不變的...

Magicer 2019-08-28 17:55 評論0 收藏0
對于移動設備頁面尺寸的理解

摘要：為移動設備制作前端頁面，往往會遇到很多令人迷惑的情況，本文中，我整理了一些相關的概念和方法，與大家分享一下。所以現代針對移動端的網頁設計或者響應式設計通常采用的方法是，精簡頁面內容，放大視覺元素，避免體驗不好的縮放和移動頁面。為移動設備制作前端頁面，往往會遇到很多令人迷惑的情況，本文中，我整理了一些相關的概念和方法，與大家分享一下。設備像素和CSS像素 css像素是固定不變的...

leon 2019-08-01 14:38 評論0 收藏0
移動端開發系列——像素與viewport

摘要：目錄移動端開發的基本觀點像素基礎知識原理解析彈性布局響應式設計的運用移動端的事件庫的使用移動端開發的基本觀點移動端開發的意義移動端用戶使用量市場需求市場供給公司需要移動端開發人才工資高，就業易涌現大波程序猿到了猴年馬月，工資才會目錄移動端開發的基本觀點像素基礎知識 viewport原理解析彈性布局響應式設計 1rem的運用移動端的事件 zepto庫的使用移動端開發的...

JayChen 2019-08-30 15:53 評論0 收藏0
移動端開發系列——像素與viewport

摘要：目錄移動端開發的基本觀點像素基礎知識原理解析彈性布局響應式設計的運用移動端的事件庫的使用移動端開發的基本觀點移動端開發的意義移動端用戶使用量市場需求市場供給公司需要移動端開發人才工資高，就業易涌現大波程序猿到了猴年馬月，工資才會目錄移動端開發的基本觀點像素基礎知識 viewport原理解析彈性布局響應式設計 1rem的運用移動端的事件 zepto庫的使用移動端開發的...

lingdududu 2019-08-01 16:21 評論0 收藏0
[技術分享] 理解 SVG 中的 Viewport 和 ViewBox－拖曳與縮放功能實做（上）

摘要：註在這篇文章中我們只考慮和為等比例的情況。最後實做出來的功能會像這樣子實做拖曳與縮放瞭解中的和在的世界中，空間的概念可以分成和兩個部分。實際感受的效果在她所撰寫文章中提供了非常好的實做案例。這個座標系統是相對固定的。理解 SVG 中的 Viewport 和 ViewBox - 實做縮放（zoom）和拖曳（drag）效果本文章同步刊載於 PJCHENder 前端網頁資源站不同於以往...

Leo_chen 2019-08-20 15:19 評論0 收藏0
[技術分享] 理解 SVG 中的 Viewport 和 ViewBox－拖曳與縮放功能實做（上）

摘要：註在這篇文章中我們只考慮和為等比例的情況。最後實做出來的功能會像這樣子實做拖曳與縮放瞭解中的和在的世界中，空間的概念可以分成和兩個部分。實際感受的效果在她所撰寫文章中提供了非常好的實做案例。這個座標系統是相對固定的。理解 SVG 中的 Viewport 和 ViewBox - 實做縮放（zoom）和拖曳（drag）效果本文章同步刊載於 PJCHENder 前端網頁資源站不同於以往...

AJie 2019-08-01 16:34 評論0 收藏0