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的手機螢幕解析度是960×640。而其內建的Safari瀏覽器的解析度是320*480。米3手機螢幕解析度是1080寬，瀏覽器解析度卻是360px寬。

我們可以通過如下代碼檢測所用的瀏覽器的解析度:

 

<script type=‘text/javascript‘>document.write("瀏覽器解析度是"+document.documentElement.clientWidth+"*"+document.documentElement.clientHeight );document.write("螢幕解析度是"+window.screen.width+"*"+window.screen.height);</script>

 

手機不同瀏覽器解析度分區響應式設計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){..................................}

 

ipod touch 4/iphone4/iphone4s

豎屏
width/height 320/356
橫屏
width/height 480/208

iphone5

豎屏
width/height 320/444
橫屏
width/height 568/208

ipad mini

豎屏
width/height 768/928
橫屏
width/height 1024/672

New Pad

豎屏
width/height 768/928
橫屏
width/height 1024/672

webapp開發——‘手機螢幕解析度’與‘瀏覽器解析度’不要混淆