webapp開發—手機屏幕分辨率和瀏覽器分辨率不要混淆

關於webApp響應式設計遇到的問題，分享給大家，最近在做一個手機webApp，因爲我手機是”米3“，屏幕截圖大小是1080寬，所以css樣式用@media screen and(min-width:1080px){ …… }，來判斷屏幕最小寬度是1080px的手機web顯示什麼樣的樣式，結果卻不能正常顯示我所指定的css樣式，最後在網上查了一下，發現分辨率的範圍不對驚恐。

css代碼如下:

    @media screen and (min-width:1080px)｛    
      ..............................  
 ｝    

    意思是在小寬度爲1080px的設備上應用{}裏面的樣式。這裏的width，注意是手機瀏覽器的分辨率，而不是手機設備的屏幕分辨率。比如蘋果4的手機屏幕分辨率是960x640。而其自帶的Safari瀏覽器的分辨率是320*480。米3手機屏幕分辨率是1080寬，瀏覽器分辨率卻是360px寬驚訝。

我們可以通過如下代碼檢測所用的瀏覽器的分辨率:
[html] view plain copy 在CODE上查看代碼片派生到我的代碼片

document.write("瀏覽器分辨率是"+document.documentElement.clientWidth+"*"+document.documentElement.clientHeight ); document.write("屏幕分辨率是"+window.screen.width+"*"+window.screen.height);

手機不同瀏覽器分辨率分區響應式設計css代碼：

@media screen and (min-width: 320px){  
....................................  
}  
@media screen and (min-width: 241px) and (max-width: 320px){  
...................................  
}  
@media screen and (min-width: 1px) and (max-width: 240px){  
..................................  
}