CSS 視口

CSS 視口模組可以指定使用者代理的初始包含塊(即視口)的大小、縮放因子和方向。

專為大視口設計的內容在小視口中檢視時可能會出現各種問題,包括意外換行、內容裁剪和滾動容器尺寸不正確。HTML 提供了視口元標籤,即 <meta name="viewport">,用於提供關於視口初始大小的提示。如果網站未設計成在小視口上良好執行並且省略了此標籤,一些移動瀏覽器會使用固定的初始包含塊寬度(通常為 980px)來渲染網站。然後內容會被縮小,導致 CSS 畫素大小小於實際畫素。結果頁面適合可用螢幕空間但難以辨認,需要使用者縮放和平移才能檢視內容。

連續媒體的視口初始包含塊具有視口的尺寸。由於視口通常不大於顯示屏,因此像手機或平板電腦這樣顯示屏較小的裝置通常會比桌上型電腦或筆記型電腦這樣較大的裝置呈現更小的視口。

參考

屬性

介面

術語表和定義

指南

視口概念

視口的概念——它是什麼、它在 CSS、SVG 和移動裝置方面的影響——以及視覺視口和佈局視口之間的區別。

使用環境變數

環境變數、瀏覽器定義的 ENV 變數以及如何使用 env() 函式的概述。

使用視口分段 API

使用 API 和環境變數建立針對不同視口分段大小和排列最佳化的響應式設計。

規範

規範
CSS 視口模組級別 1

另見