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中的內容時，就不會因為不同裝置不同的解析度導致介面錯位混亂的情況，如下：
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 最大放大比例為...