資訊專欄INFORMATION COLUMN
摘要：一的概念端實際上等于瀏覽器窗口，擁有瀏覽器窗口的寬度和高度，元素使用寬度的在未手動設置元素寬度情況下。用獲取元素本身的尺寸移動端分為和。大小由設備本身決定。所有的縮放規則都是相對于而言的，而與多寬無關。
一、viewport的概念 PC端
viewport實際上等于瀏覽器窗口，擁有瀏覽器窗口的寬度和高度，元素使用viewport寬度的100%（在未手動設置html元素寬度情況下）。用document.documentElement.clientWidth獲取viewport的寬度。用document.documentElement.offsetWidth獲取元素本身的尺寸
移動端分為visual viewport、layout viewport和ideal viewport。
關于visual viewport和layout viewport兩者解釋請看兩個viewport的故事（第二部分）文章的viewport板塊。關于ideal viewport的解釋請看Meta viewport (視口元信息標簽)。ideal viewport大小由設備本身決定。
CSS布局，尤其是百分比寬度，是以layout viewport做為參照系來計算的。所以元素在初始情況下用的是layout viewport的寬度。
當進行縮放（如果你放大，屏幕上的CSS像素會變少）的時候，visual viewport(就是頁面當前顯示在屏幕上的部分)的尺寸會發生變化，layout viewport的尺寸仍然跟之前的一樣。（如果不這樣，你的頁面將會像百分比寬度被重新計算一樣而經常被重新布局。）
用document.documentElement.clientWidth計算layout viewport的寬度。
用window.innerWidth/Height或者document.documentElement.offsetWidth計算visual viewport的寬度
用document.documentElement.offsetWidth計算 元素的尺寸。
viewport meta標簽用來設置layout viewport的寬度。
initial-scale=1visual viewport width = ideal viewport width / zoom factor
設置 initial-scale這條規則實際上做了如下2件事：
1、將頁面初始縮放因子設置為給定的值，根據ideal viewport，計算得到visual viewport的寬。
2、設置layout viewport的寬等于剛剛計算出來的visual viewport的寬。
注意:對于IE，會獲取一個錯誤的ideal viewport（320x320而不是320x480），并且會將任意值都當作成1，所以在IE上initial-scale取什么值都無所謂。
initial-scale=1可以將 layout viewport的值設置為 ideal viewport的大小。IE10上橫屏模式和豎屏模式的寬都是豎屏時ideal viewport寬度。
width=device-widthwidth規則下有一個特殊的值device-width，通過設置width=device-width可以將layout viewport(布局視口)的寬度等于 ideal viewport(理想視口)的寬。
在iphone和ipad上，無論是豎屏還是橫屏，寬度都是豎屏時ideal viewport的寬度。
initial-scale=1與width=device-width1、使用 width=device-width 和initial-scale=1兩個規則，可以將 layout viewport的值設置為 ideal viewport的大小。
2、所有的縮放規則都是相對于 ideal viewport而言的，而與layout viewport多寬無關。因此maximum-scale=3的含義就是頁面最多放大到 ideal viewport的3倍。
width 和 initial-scale=1當width 和 initial-scale=1沖突時，使用寬度最大原則(橫屏或豎屏模式下均是)來解決，即哪個寬度大用哪個。
三、設備像素與CSS像素之間的換算是如何產生的 每英寸像素(pixel per inch)ppi，表示每英寸所擁有的像素(pixel)數目，數值越高，代表顯示屏能夠以越高的密度顯示圖像。ppi的計算方式可以參考維基百科每英寸像素
設備像素比(device pixel ratio)以上計算出ppi是為了得到密度分界，獲得默認縮放比例，即設備像素比。
上圖可知，ppi在120-160之間的手機被歸為低密度手機，160-240被歸為中密度，240-320被歸為高密度，320以上被歸為超高密度（Apple給了它一個高大上的名字——Retina）。
獲得設備像素比后，便可得知設備像素與CSS像素之間的比例。當這個比率為1:1時，使用1個設備像素顯示1個CSS像素。當這個比率為2:1時，使用4個設備像素顯示1個CSS像素，當這個比率為3:1時，使用9（3*3）個設備像素顯示1個CSS像素。
四、縮放實質現代瀏覽器中實現縮放的方式無怪乎都是「拉伸」像素。
假設你給一個元素設置了width: 128px的屬性，并且你的顯示器是1024px寬，當你最大化你的瀏覽器屏幕，這個元素將會在你的顯示器上重復顯示8次（大概是這樣；我們先忽略那些微妙的地方）。
如果用戶進行縮放，那么計算方式將會發生變化。如果用戶放大到200%，那么你的那個擁有width: 128px屬性的元素在1024px寬的顯示器上只會重復顯示4次。元素的寬度并沒有從128被修改為256像素，元素仍然是128個CSS像素寬，即使它占據了256個設備像素的空間。
參考自：
兩個viewport的故事（第一部分）
兩個viewport的故事（第二部分）
Meta viewport (視口元信息標簽)
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50362.html
摘要：也發現了這個問題，并且適時的出現，它提出了一個方案用來解決這個問題。很明顯，的尺寸不會是一個固定的值，甚至每款設備都可能不同。而完美視口也是通過的某種設置來達到。特性通常情況下，有以下種設置。用于指定用戶能夠放大的比例。 前言 這次想聊聊移動開發相關的事。是的，你沒有看錯，一句話就可以開始你的移動前端開發。 你心里一定在想，什么話這么酷，能夠瞬間帶入到移動前端開發的世界。 但其實它一點...
摘要：一的概念端實際上等于瀏覽器窗口，擁有瀏覽器窗口的寬度和高度，元素使用寬度的在未手動設置元素寬度情況下。用獲取元素本身的尺寸移動端分為和。大小由設備本身決定。所有的縮放規則都是相對于而言的，而與多寬無關。 一、viewport的概念 PC端 viewport實際上等于瀏覽器窗口，擁有瀏覽器窗口的寬度和高度，元素使用viewport寬度的100%（在未手動設置html元素寬度情況下）。用d...
摘要：是阿里團隊開發的前端適配方案，也是用的的方法。那么第一種方法其實已經能解決前端適配問題了，為什么阿里還要開發一個呢在第一種方法中，時沒有任何問題，但是在或者更高的手機屏幕上，因為物理像素的增加，存在小于的顯示空間。 話說我剛工作的時候，就開始用rem了，過了沒多久，接觸到了flexible，系統化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...
摘要：是阿里團隊開發的前端適配方案，也是用的的方法。那么第一種方法其實已經能解決前端適配問題了，為什么阿里還要開發一個呢在第一種方法中，時沒有任何問題，但是在或者更高的手機屏幕上，因為物理像素的增加，存在小于的顯示空間。 話說我剛工作的時候，就開始用rem了，過了沒多久，接觸到了flexible，系統化且支持iOS的retina屏迅速征服了我，最近又看到了大漠大神的vw。所以本文想完成一篇一...
閱讀 4152·2023-04-26 02:40
閱讀 2655·2023-04-26 02:31
閱讀 2746·2021-11-15 18:08
閱讀 568·2021-11-12 10:36
閱讀 1425·2021-09-30 09:57
閱讀 5192·2021-09-22 15:31
閱讀 2626·2019-08-30 14:17
閱讀 1269·2019-08-30 12:58
