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){
- ..................................
-
}