国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

淺談移動端中的視口(viewport)

LucasTwilight / 1846人閱讀

摘要:在端,視口指的是瀏覽器的可視區域,其寬度和瀏覽器窗口的寬度保持一致。本文主要討論移動端中的視口。因此,引入了布局視口視覺視口和理想視口三個概念,使得移動端中的視口與瀏覽器寬度不再相關聯。

在 PC 端,視口指的是瀏覽器的可視區域,其寬度和瀏覽器窗口的寬度保持一致。在 CSS 標準文檔中,視口也被稱為初始包含塊,它是所有 CSS 百分比寬度推算的根源,給 CSS 布局限制了一個最大寬度。

而移動端則較為復雜,它涉及到三個視口:布局視口(Layout Viewport)、視覺視口(Visual Viewport)和理想視口(Ideal Viewport)。

本文主要討論移動端中的視口。

1. 基本概念 1.1 兩種像素

像素是計算機屏幕中顯示特定顏色的最小區域。屏幕中的像素越多,同一范圍內能看到的內容就越多。或者說,當設備尺寸相同時,像素越密集,畫面就越精細。

那么,當我們在 CSS 中為一個元素設置屬性 width: 250px; 時,會發生什么?這個元素的寬度究竟是多少像素呢?

事實上,這里已經涉及了兩種不同的像素:物理像素和 CSS 像素。

物理像素(設備像素,device pixels)

指的是設備屏幕的物理像素,任何設備的物理像素數量都是固定的。

CSS 像素(CSS pixels)

是 CSS 和 JS 中使用的一個抽象概念。它和物理像素之間的比例取決于屏幕的特性(是否為高密度)以及用戶進行的縮放,由瀏覽器自行換算。

在 Apple 的視網膜屏(Retina)中,每 4 個像素為一組,渲染出普通屏幕中一個像素顯示區域內的圖像,從而實現更為精細的顯示效果。此時, 250px 的元素跨越了 500 個物理像素的寬度。

如果用戶進行了放大,那么一個 CSS 像素還將跨越更多的物理像素。

1.2 三種視口

移動端瀏覽器通常寬度是 240px~640px,而大多數為 PC 端設計的網站寬度至少為 800px,如果仍以瀏覽器窗口作為視口的話,網站內容在手機上看起來會非常窄。

因此,引入了布局視口、視覺視口和理想視口三個概念,使得移動端中的視口與瀏覽器寬度不再相關聯。

布局視口(layout viewport)

一般移動設備的瀏覽器都默認設置了一個 viewport 元標簽,定義一個虛擬的布局視口(layout viewport),用于解決早期的頁面在手機上顯示的問題。iOS, Android 基本都將這個視口分辨率設置為 980px,所以 PC 上的網頁基本能在手機上呈現,只不過元素看上去很小,一般默認可以通過手動縮放網頁。

布局視口的寬度/高度可以通過 document.documentElement.clientWidth / Height 獲取。

可以看到,默認的布局視口寬度為 980px。如果要顯式設置布局視口,可以使用 HTML 中的 meta 標簽:

布局視口使視口與移動端瀏覽器屏幕寬度完全獨立開。CSS 布局將會根據它來進行計算,并被它約束。

視覺視口(visual viewport)

視覺視口是用戶當前看到的區域,用戶可以通過縮放操作視覺視口,同時不會影響布局視口。

視覺視口和縮放比例的關系為:

當前縮放值 = 理想視口寬度  / 視覺視口寬度

所以,當用戶放大時,視覺視口將會變小,CSS 像素將跨越更多的物理像素。

理想視口(ideal viewport)

布局視口的默認寬度并不是一個理想的寬度,于是 Apple 和其他瀏覽器廠商引入了理想視口的概念,它對設備而言是最理想的布局視口尺寸。顯示在理想視口中的網站具有最理想的寬度,用戶無需進行縮放。

理想視口的值其實就是屏幕分辨率的值,它對應的像素叫做設備邏輯像素(device independent pixel, dip)。dip 和設備的物理像素無關,一個 dip 在任意像素密度的設備屏幕上都占據相同的空間。如果用戶沒有進行縮放,那么一個 CSS 像素就等于一個 dip。

用下面的方法可以使布局視口與理想視口的寬度一致:

實際上,這就是響應式布局的基礎。

2. 視口的設置

我們可以使用視口元標簽(viewport meta 標簽)來進行布局視口的設置。

下面是每個屬性的詳細說明:

屬性名 取值 描述
width 正整數或device-width 定義視口的寬度,單位為像素
height 正整數或device-height 定義視口的高度,單位為像素,一般不用
initial-scale [0.0-10.0] 定義初始縮放值
minimum-scale [0.0-10.0] 定義放大最大比例,它必須小于或等于maximum-scale設置
maximum-scale [0.0-10.0] 定義縮小最小比例,它必須大于或等于minimum-scale設置
user-scalable yes / no 定義是否允許用戶手動縮放頁面,默認值 yes

有幾點值得注意:

viewport 標簽只對移動端瀏覽器有效,對 PC 端瀏覽器是無效的

當縮放比例為 100% 時,dip 寬度 = CSS 像素寬度 = 理想視口的寬度 = 布局視口的寬度

多帶帶設置 initial-scale 或 width 都會有兼容性問題,所以設置布局視口為理想視口的最佳方法是同時設置這兩個屬性

即使設置了 user-scalable = no,在 Android Chrome 瀏覽器中也可以強制啟用手動縮放

3. 一倍圖、二倍圖、三倍圖

MacBook Pro 視網膜屏(Retina)顯示器硬件像素是 2880px 1800px。當設置屏幕分辨率為 1920px 1200px 的時候,理想視口的寬度值是 1920px, 那么 dip 的寬度值就是 1920px。其與理想視口寬度的比值為1.5(2880/1920),這個比值叫做設備像素比:

邏輯像素寬度 * 設備像素比 = 物理像素寬度

設備像素比可以通過 window.devicePixelRatio 來獲取,或者使用 CSS 中的 device-pixel-ratio

下面是常見的設備像素比:

普通密度桌面顯示屏:devicePixelRatio = 1

高密度桌面顯示屏(Mac Retina):devicePixelRatio = 2

主流手機顯示屏:devicePixelRatio = 2 or 3

對于一張 100px * 100px 的圖片,通過 CSS 設置其寬高:

{
    width:100px;
    height:100px;
}

在普通顯示屏的電腦中打開是正常的,但假設在手機或 Retina 屏中打開,按照邏輯分辨率來渲染,他們的 devicePixelRatio = 2,那么就相當于拿 4 個物理像素來描繪 1 個電子像素。這等于拿一個2倍的放大鏡去看圖片,圖片就會變得模糊。

這時,就需要使用 @2x 甚至 @3x 圖來避免圖片的失真。


最后,本文僅涉及了移動端開發中視口的基本概念,具體細節可以參考 PPK 的大作《移動Web手冊》

PS:電子版可關注公眾號《代碼寫完了》,發送"ppk"獲取

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

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

相關文章

  • 淺談移動中的視口viewport

    摘要:在端,視口指的是瀏覽器的可視區域,其寬度和瀏覽器窗口的寬度保持一致。本文主要討論移動端中的視口。因此,引入了布局視口視覺視口和理想視口三個概念,使得移動端中的視口與瀏覽器寬度不再相關聯。在 PC 端,視口指的是瀏覽器的可視區域,其寬度和瀏覽器窗口的寬度保持一致。在 CSS 標準文檔中,視口也被稱為初始包含塊,它是所有 CSS 百分比寬度推算的根源,給 CSS 布局限制了一個最大寬度。 而移動...

    selfimpr 評論0 收藏0
  • viewport&像素

    摘要:屏幕分辨率是指一塊屏幕中畫面水平方向的像素值畫面垂直方向的像素值。圖像分辨率是指每英寸圖像內的像素點數。圖像分辨率是有單位的,叫像素每英寸。設備像素可能不相同物理像素不會改變,單位是。及英寸,而英寸等于厘米舉個 viewport是什么 移動端中,分為兩個視口: layout viewport 布局視口: 視口的分辨率接近于PC顯示器,也就是html的寬度接近于pc端的寬度。 visu...

    hankkin 評論0 收藏0
  • 移動端H5 viewport

    摘要:移動端頁面大家都遇到過的問題。移動端適配方案上移動端適配方案下本文對做一些補充手機屏幕手機屏幕屬于硬件屬性,我們無論是通過還是標簽都是無法影響到它的。很多沒有對移動端做適配的網頁,我們用手機打開,發現網頁被縮小到手機屏幕這么寬了。 移動端頁面大家都遇到過 viewport 的問題。關于 viewport 的文章有很多了,推薦給大家這兩篇,寫得非常詳細。移動端適配方案(上)移動端適配方案...

    mzlogin 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<