CSS viewport視口及設定

2022-06-30 03:06:14 字數 719 閱讀 3073

一、viewport視口

在移動端,viewport視口就是瀏覽器顯示頁面內容的螢幕區域。

viewport視口有兩種視口,分別是 visual viewport(可視視口)和layout viewport(布局視口):

(1)visual viewport固定大小跟螢幕大小相同,在上面;

(2)layout viewport可改變大小,在下面。layout viewport預設大小為980畫素,可通過document.documentelement.clientwidth獲取

現代網頁需要把layout viewport設定成visual viewport同等大小,方便網頁製作。

二、viewport設定

通過meta標籤進行設定,name屬性指定viewport值,content屬性進行視口配置

取值:width      設定layout viewport寬度的特定值,device-width表示裝置寬。

height        設定layout viewport高度特定值,一般不進行設定。

initial-scale          設定頁面的初始縮放

minimum-scale         設定頁面的最小縮放

maximum-scale        設定頁面的最大縮放

user-scalable          設定頁面能否進行縮放

html響應式設計視口 視窗視口

關於視口 視口在響應式設計中是乙個非常重要的概念,在移動端瀏覽器中存在兩種視口 一是可見視口,即裝置大小 另外一種是視窗視口,即網頁寬度。裝置螢幕是414pxd 寬度,在瀏覽器中,414px的螢幕能夠顯示1200px 的內容。那麼,414px 就是可見視口的寬度,而1200px 就是視窗視口的寬度。...

glViewport 設定視口

c語言描述 void glviewport glint x,glint y,glsizei width,glsizei height 引數x,y 指定視口矩形的左下角座標,單位為畫素.預設值為 0,0 width,height 指定視口矩形的寬度和高度.說明glviewport函式指定x和y從單位裝...

視口和視窗

對映方式指定了邏輯座標系的邏輯單位和座標軸正方向,座標原點沒有涉及。而且,在 自作主張的 兩種對映方式下,邏輯單位 座標軸正方向和座標原點都有待確定。視口 是基於裝置座標的,通常,視口與客戶區相同。點 0,0 是客戶區域的左上角。x 的值向右增加,y 的值向下增加。視窗 是基於邏輯座標的,邏輯座標可...