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

2021-10-25 01:45:55 字數 627 閱讀 6956

關於視口

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

為了顯示更多的內容,瀏覽器會通過viewport的預設縮放將網頁等比例縮小。但是為了讓使用者能夠清晰看清楚裝置中的內容,通常情況下,並不是預設的viewport進行展示,而是自定義配置視口的屬性,使這個縮小比例更加適當。在html5中,可以用來配置視口屬性。

上述**中,user-scalable用來設定使用者是否可以縮放,預設是yes;width用於設定視窗視口的寬度,decice-width用來設定視窗視窗和可見視口寬度相同,該屬性也可以設定成具體的寬度;initial-scale 用來設定初始縮放比例,取值為0-10.0;maximum-scale用於設定最大縮放比例,取值為0-10.0。除此之外,還可以通過height 屬性設定視窗視口的高度,minimum-scale用來設定最小縮放比例。

視口和視窗

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

視窗與視口

幾個概念容易亂,先寫下來 一般來說,客戶區左上角的點對應視口原點 0,0 我理解他們為等同關係.裝置區 0,0 點就是視口原點 0,0 點,且不可改變.視窗座標應用中使用邏輯座標,偶理解為視窗原點就是邏輯原點.等同關係.且可以改變.下面可能用上.不要理解為整個視窗的左上角那個點 從理解應用來說,無論...

QT視口和視窗

視口和視窗實際上是同一區域 視口使用的是物理座標,而視窗使用的是邏輯座標,可以無視widget的放大和縮小 int w width int h height int side qmin w,h 去長和寬的小值 qrect rect w side 2 h side 2 side,side viewpo...