僅對於移動端有效,可以控制使用者的縮放程度。
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
>
>
documenttitle
>
head
>
>
>
hellowworldh1
>
body
>
html
>
其中還要注意兩個概念:物理解析度與系統解析度。
以iphone8為例,當使用控制台切換的時候,會看到上方顯示的解析度為375*667。
但實際上,iphone8官方給出的解析度是750*1334。
其實是因為,為了方便我們人眼看清螢幕上的字型,需要將字型放大,因此會將移動端四個解析度合成乙個解析度。最終顯示的是依靠系統解析度來顯示
將width定死的時候,無論什麼移動裝置,都會依照於設定的值,這樣在設定body中的內容時,就不會因為不同裝置不同的解析度導致介面錯位混亂的情況,如下:
執行可以發現,不管更改什麼樣的裝置,#d1這個div永遠佔一半的寬度,#d2這個div永遠佔整個寬度。
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=750, initial-scale=1.0"
>
>
documenttitle
>
>
body
#d1#d2
style
>
head
>
>
"d1"
>
div>
"d2"
>
div>
body
>
html
>
移動端與響應式02
一般情況下,乙個專案會劃分為pc端的頁面與移動端的頁面。還有一種,只需要一頁 就可以適應pc端與移動端,比如蘋果的官方 這就需要用到 查詢 media的操作。舉個例子 現在有乙個需求,當為pc大螢幕的時候,d1這個div佔據50 的寬度 當為移動端小螢幕的時候 這裡設定為小於600px d1佔據10...
移動端與響應式布局
瀏覽器切換裝置步驟 f12開啟控制台,如圖 viewport只針對於移動端,pc端無效 viewport content width device width,initial scale 1.0,maximum scale 1.0,user scalable 0 content的配置 width d...
移動端與響應式筆記
移動端與響應式 meta viewport 視窗的設定 僅使用移動端 width device width 寬度 裝置寬度 適配不同手機,可以寫死為750 initial scale 1 初始化比例為1 mininum scale 1 最小縮小比例為1 maxinum scale 1 最大放大比例為...