移动开发的分辨率问题
?? 這兩天在做移動開發的準備，比較糾結于分辨率問題：iphone3的分辨率是320 X 480，iphone4直接翻了一倍640 X 960，而ipad1、ipad2的分辨率都是1024 X 768。如果做native的開發，那么也就只面對這幾個問題就罷了，但瀏覽器又多了個view port的概念，不論iphone3、iphone4還是ipad在瀏覽器里默認的view port都是980 * x ， x根據ipone還是ipad決定，我們開發一個網頁的時候，可以直接使用默認的980 view port，也可以自己顯式地定義一個view port。view port事實上應該是在手機分辨率和瀏覽器顯示分辨率之間利用dpi做了一個縮放，而這個縮放的比例應該是手機瀏覽器自動幫我們做的。
??為了讓iphone和ipad上兼容，且最大利用屏幕分辨率，在不考慮“添加至主屏”從而使瀏覽器激活全屏功能的情況下，地址欄和狀態欄是個不得不考慮的因素。地址欄可以通過讓內容超過一屏，同時調用window.scroll(0,0)來隱藏掉，但狀態欄和手機頂部的“信號、時間、電池”的那個欄是無法隱藏掉的。
?? 也就是說，屏幕最大能用的尺寸如下所示：
??
為了防止用戶縮放屏幕，我加了<meta content="user-scalable=0;" name="viewport"> 這一句，這樣瀏覽器的分辨率就可以鎖定了。屏幕橫過來最大可用的分辨率尺寸是980*545，而這個分辨率在ipad下height稍低了一點，ipad下還有空余，但并不大。木桶原理，就低不就高，所以屏幕尺寸先初步定在980*545了。
代碼貼一下：
<!doctype html>
<html>
<head>
<title>test for iphone</title>
<meta charset="utf-8">
<meta content="user-scalable=0;" name="viewport">?
<meta content="yes" name="apple-mobile-web-app-capable">
<style type="text/css">
html,body{margin:0;padding:0;height:100%;background:#000;}
#wrap{width:980px;height:545px;overflow:hidden;background:#999;margin:0 auto;}
</style>
</head>
<body>
<div id="wrap">
<img src="a.jpg">
<img src="b.jpg">
</div>
<script type="text/javascript">
window.addEventListener("load",function(){
setTimeout(function(){
??window.scrollTo(0,0);
},0);
});
window.addEventListener("orientationchange",function(){
window.scrollTo(0,0);
},false);
</script>
</body>
</html>
?
轉載于:https://www.cnblogs.com/cly84920/archive/2011/09/07/4426579.html
總結
以上是生活随笔為你收集整理的移动开发的分辨率问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用extjs4做个登录框
- 下一篇： 用setsockopt()来控制recv