手機端web頁面的一些注意事項

一、viewport的寫法

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

寬度設爲設備寬度（手機屏幕寬度），默認縮放比例設爲不縮放，用戶是否可手動縮放設爲「否」

二、device-width具體是什麼呢？

第一代iphone的時候，分辨率爲320*480，屏幕尺寸爲3.5寸（注意，這個3.5寸說的是屏幕的對角線寬），這時候device-width就是320px，也是手機的分辨率寬，此時device-width就是設備寬。但第二代的iphone分辨率提升爲了480*960，屏幕尺寸爲依然爲3.5寸，若是device-width仍是設備寬，那麼一樣是320px的頁面放480*960的手機屏上，圖文就會變得比較小，又會影響其可讀性。所以iphone4/5的device-width一直維持在320px，ipad一直維持在1024px，但iphone6/6+的device-width變大爲375px/414px。這個時候，device-width就不是設備寬了（也就不是分辨率的寬了），是一箇中間層。Android採用的也是這一律念，其device-width值以360居多，但也不乏有像540px和600px這樣的奇葩。在設置了<meta />標籤之後，device-width值能夠用window.innerWidth來獲取device-width值。

 

device-width是一箇中間層，對於iphone4/5,device-width是320px；對於iphone6/6+,device-width是375px/414px；對於android手機，device-width以360px居多。

引用自  口口一凡

三、<meta content="yes" name="apple-mobile-web-app-capable">

隱藏蘋果手機的導航欄

四、手機「屏幕寬度」和「屏幕分辨率」的區別

 

寫手機端頁面時，只須要考慮「屏幕寬度」

各種型手機device-width和device-height

iphone4	320	480
iphone5	320	568
iphone6	375	667
iphone6+	414	736
ipad	1024
android	360

 

 

 

 

 

 

 

 

因此，爲了適配全部手機大小，通常將web頁面的內容寬度設爲320px；

 

五、在手機上測試移動web靜態頁面時，能夠在源文件根路徑開啓一個web服務器

python -m SimpleHTTPServer 8080

注意：手機和pc鏈接在同一個局域網中

微信中訪問，能夠將url轉爲二維碼