HTML5移動開發：手機螢幕解析度和手機瀏覽器解析度
阿新 • • 發佈：2019-02-11
在桌面電腦端，瀏覽器的解析度與電腦螢幕的解析度是一致的。而智慧手機的螢幕解析度往往和手機瀏覽器解析度不同，因為手機的螢幕相對來說比較小，如果要顯示高清畫質，那麼它的解析度就要高。比如說，蘋果iPhone4手機的螢幕解析度是640*960，而其自帶的Safari瀏覽器的解析度卻只有320*480。所以，我們在用HTML5+CSS3開發移動網站和移動應用時，就要注意了。
假設，我們現在要針對蘋果iPhone4開發一個移動網站以及一個移動應用，在做移動網站時，我們這樣寫樣式：
而在做移動應用時，我們得這樣寫樣式：
min-width和max-width：表示手機瀏覽器的最小寬度和最大寬度
min-device-width和max-device-width：表示手機螢幕顯示的最小寬度和最大寬度
也就是說，如果我們用HTML5開發，最後要封裝成應用，那麼我們在開發時，要查詢的是手機螢幕的解析度；如果只是開發移動網站，那麼我們需要知道的是各手機瀏覽器的解析度。
假設，我們現在要針對蘋果iPhone4開發一個移動網站以及一個移動應用，在做移動網站時，我們這樣寫樣式：
1 |
@media screen and(min-width:320px)and
(max-width:480px){ |
2 |
3 |
} |
1 |
@media screen and(min-device-width:640px)and
(max-device-width:960px){ |
2 |
3 |
} |
min-device-width和max-device-width：表示手機螢幕顯示的最小寬度和最大寬度
也就是說，如果我們用HTML5開發，最後要封裝成應用，那麼我們在開發時，要查詢的是手機螢幕的解析度；如果只是開發移動網站，那麼我們需要知道的是各手機瀏覽器的解析度。
我們可以通過如下程式碼檢測所用的瀏覽器的解析度:
- <</span>scripttype='text/javascript'>
- document.write("瀏覽器解析度是"+document.documentElement.clientWidth+"*"+document.documentElement.clientHeight );
- document.write("螢幕解析度是"+window.screen.width+"*"+window.screen.height);
- </</span>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){
- ..................................
-
}