初學前端之路 1視口控制(viewport)

2021-09-16 13:36:10 字數 686 閱讀 2440

當設計者設計網頁的時候,會按照固定的寬度設計,比如pc端1000畫素或者1200畫素等,在移動端640畫素或者750畫素,當轉換到pc端的時候可能也會滿足不了頁面需求,可能會顯示不完整,裝置寬度遠遠不夠。

為了彌補這一點,移動裝置上瀏覽器會把視口放大,一般是980畫素或者1024畫素。但這樣帶來的後果是瀏覽器出現橫向滾動條,因為裝置實際可視區域比瀏覽器自設的寬度要小很多。

為了解決這一問題,引入了viewport屬性。viewport屬性通過乙個meta標籤引入,例項如下:

即:讓當前viewport的寬度等與裝置的寬度,同時不允許使用者手動縮放。

視口是指不包括瀏覽器外殼(如標籤頁、書籤欄、除錯工具等)的視窗,也就是文件內容的可視區域。

vieport目的:讓html文件在小尺寸螢幕上正確顯示。屬性值可包含多個鍵值對,如下:

|關鍵字 | 描述 | 值

|width|視口的寬度|device-width(裝置寬度)或確切的畫素數

|initial-scale |視口初始縮放級別| 0~10之間的正數,1表示無縮放,值越小頁面越精細

|minimum-scale|視口能縮放的最小值|0~10之間的正數

|maximum-scale|視口能縮放的最大值|0~10之間的正數

| user-scalable| 使用者是否可以手動縮放 |yes/no

小白學前端Day1

this is a headingh1 換行標籤 粗體 斜體 下劃線 下劃線刪除線 刪除線刪除線 刪除線p上標籤 p上標籤 p下標籤 p下標籤 有序列表 有序列表 有序列表 有序列表 有序列表 有序列表 有序列表 有序列表 name godzilla born 1952 birthplace jap...

99 初學前端小白對於css權重的錯誤理解

99 初學前端小白對於css權重的錯誤理解 我在剛開始學習css選擇器的時候,很多老師提到了權重這個概論。也就是 id 選擇器權值為 100,類選擇器權值為 10,標籤選擇器權值為 1,當乙個選擇器由多個 id 選擇器 類選擇器或標籤選擇器組成時,則將所有權值相加,然後再比較權值。但是,這個說法實際...

Python爬蟲學習之路(1) 前端

最近一直想找一種督促自己學習的方法,感覺似乎寫部落格是乙個不錯的選擇。所以這些部落格的主要目的當然是讓自己靜下心來鞏固複習,當然如果能對別人有所幫助,那就再好不過了。我是在win10 pycharm上編寫python的,至於一些庫,使用的時候再匯入吧。學習爬蟲之前一定要對前端知識有所了解,當然要求不...