移動前端中 viewport （視口）

only_do 發(fā)布于2019-08-30 15:52 / 872人閱讀

摘要：一的概念端實際上等于瀏覽器窗口，擁有瀏覽器窗口的寬度和高度，元素使用寬度的在未手動設(shè)置元素寬度情況下。用獲取元素本身的尺寸移動端分為和。大小由設(shè)備本身決定。所有的縮放規(guī)則都是相對于而言的，而與多寬無關(guān)。

一、viewport的概念 PC端

viewport實際上等于瀏覽器窗口，擁有瀏覽器窗口的寬度和高度，元素使用viewport寬度的100%（在未手動設(shè)置html元素寬度情況下）。用document.documentElement.clientWidth獲取viewport的寬度。用document.documentElement.offsetWidth獲取元素本身的尺寸

移動端

分為visual viewport、layout viewport和ideal viewport。
關(guān)于visual viewport和layout viewport兩者解釋請看兩個viewport的故事（第二部分）文章的viewport板塊。關(guān)于ideal viewport的解釋請看Meta viewport (視口元信息標(biāo)簽)。ideal viewport大小由設(shè)備本身決定。

CSS布局，尤其是百分比寬度，是以layout viewport做為參照系來計算的。所以元素在初始情況下用的是layout viewport的寬度。

當(dāng)進(jìn)行縮放（如果你放大，屏幕上的CSS像素會變少）的時候，visual viewport(就是頁面當(dāng)前顯示在屏幕上的部分)的尺寸會發(fā)生變化，layout viewport的尺寸仍然跟之前的一樣。（如果不這樣，你的頁面將會像百分比寬度被重新計算一樣而經(jīng)常被重新布局。）

用document.documentElement.clientWidth計算layout viewport的寬度。
用window.innerWidth/Height或者document.documentElement.offsetWidth計算visual viewport的寬度
用document.documentElement.offsetWidth計算元素的尺寸。

二、viewport meta標(biāo)簽

viewport meta標(biāo)簽用來設(shè)置layout viewport的寬度。

initial-scale=1

visual viewport width = ideal viewport width / zoom factor
設(shè)置 initial-scale這條規(guī)則實際上做了如下2件事：
1、將頁面初始縮放因子設(shè)置為給定的值，根據(jù)ideal viewport，計算得到visual viewport的寬。
2、設(shè)置layout viewport的寬等于剛剛計算出來的visual viewport的寬。
注意:對于IE，會獲取一個錯誤的ideal viewport（320x320而不是320x480），并且會將任意值都當(dāng)作成1，所以在IE上initial-scale取什么值都無所謂。

initial-scale=1可以將 layout viewport的值設(shè)置為 ideal viewport的大小。IE10上橫屏模式和豎屏模式的寬都是豎屏?xí)rideal viewport寬度。

width=device-width

width規(guī)則下有一個特殊的值device-width，通過設(shè)置width=device-width可以將layout viewport(布局視口)的寬度等于 ideal viewport(理想視口)的寬。

在iphone和ipad上，無論是豎屏還是橫屏，寬度都是豎屏?xí)rideal viewport的寬度。

initial-scale=1與width=device-width

1、使用 width=device-width 和initial-scale=1兩個規(guī)則，可以將 layout viewport的值設(shè)置為 ideal viewport的大小。

2、所有的縮放規(guī)則都是相對于 ideal viewport而言的，而與layout viewport多寬無關(guān)。因此maximum-scale=3的含義就是頁面最多放大到 ideal viewport的3倍。

width 和 initial-scale=1

當(dāng)width 和 initial-scale=1沖突時，使用寬度最大原則(橫屏或豎屏模式下均是)來解決，即哪個寬度大用哪個。

三、設(shè)備像素與CSS像素之間的換算是如何產(chǎn)生的 每英寸像素(pixel per inch)

ppi，表示每英寸所擁有的像素(pixel)數(shù)目，數(shù)值越高，代表顯示屏能夠以越高的密度顯示圖像。ppi的計算方式可以參考維基百科每英寸像素

設(shè)備像素比(device pixel ratio)

以上計算出ppi是為了得到密度分界，獲得默認(rèn)縮放比例，即設(shè)備像素比。

上圖可知，ppi在120-160之間的手機(jī)被歸為低密度手機(jī)，160-240被歸為中密度，240-320被歸為高密度，320以上被歸為超高密度（Apple給了它一個高大上的名字——Retina）。

獲得設(shè)備像素比后，便可得知設(shè)備像素與CSS像素之間的比例。當(dāng)這個比率為1:1時，使用1個設(shè)備像素顯示1個CSS像素。當(dāng)這個比率為2:1時，使用4個設(shè)備像素顯示1個CSS像素，當(dāng)這個比率為3:1時，使用9（3*3）個設(shè)備像素顯示1個CSS像素。

四、縮放實質(zhì)

現(xiàn)代瀏覽器中實現(xiàn)縮放的方式無怪乎都是「拉伸」像素。

假設(shè)你給一個元素設(shè)置了width: 128px的屬性，并且你的顯示器是1024px寬，當(dāng)你最大化你的瀏覽器屏幕，這個元素將會在你的顯示器上重復(fù)顯示8次（大概是這樣；我們先忽略那些微妙的地方）。

如果用戶進(jìn)行縮放，那么計算方式將會發(fā)生變化。如果用戶放大到200%，那么你的那個擁有width: 128px屬性的元素在1024px寬的顯示器上只會重復(fù)顯示4次。元素的寬度并沒有從128被修改為256像素，元素仍然是128個CSS像素寬，即使它占據(jù)了256個設(shè)備像素的空間。

參考自：
兩個viewport的故事（第一部分）
兩個viewport的故事（第二部分）
Meta viewport (視口元信息標(biāo)簽)

云服務(wù)器 GPU云服務(wù)器移動前端 viewport 前端移動開發(fā) 移動前端框架

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/116399.html

發(fā)表評論

登陸后可評論

0條評論

only_do

男|高級講師

我要關(guān)注我要私信

TA的文章

千呼萬喚，web人臉識別登錄完整版來了，這樣式我愛了

閱讀 2671·2021-11-25 09:43
云虛擬主機(jī)是什么-虛擬主機(jī)和云主機(jī)的區(qū)別是什么？

閱讀 1921·2021-09-22 15:26
【bug庫】Safari瀏覽器white-space:nowrap不生效

閱讀 3953·2019-08-30 15:56
關(guān)于git常用命令

閱讀 1788·2019-08-30 15:55
記一些css 3效果

閱讀 1957·2019-08-30 15:54
移動前端中 viewport （視口）

閱讀 873·2019-08-30 15:52
DIV的失去焦點(blur)實現(xiàn)

閱讀 3230·2019-08-29 16:23
webpack學(xué)習(xí)心得

閱讀 966·2019-08-29 12:43

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

移動前端中 viewport （視口）

相關(guān)文章

viewport詳解