移动开发的分辨率问题
?? 這兩天在做移動(dòng)開發(fā)的準(zhǔn)備，比較糾結(jié)于分辨率問(wèn)題：iphone3的分辨率是320 X 480，iphone4直接翻了一倍640 X 960，而ipad1、ipad2的分辨率都是1024 X 768。如果做native的開發(fā)，那么也就只面對(duì)這幾個(gè)問(wèn)題就罷了，但瀏覽器又多了個(gè)view port的概念，不論iphone3、iphone4還是ipad在瀏覽器里默認(rèn)的view port都是980 * x ， x根據(jù)ipone還是ipad決定，我們開發(fā)一個(gè)網(wǎng)頁(yè)的時(shí)候，可以直接使用默認(rèn)的980 view port，也可以自己顯式地定義一個(gè)view port。view port事實(shí)上應(yīng)該是在手機(jī)分辨率和瀏覽器顯示分辨率之間利用dpi做了一個(gè)縮放，而這個(gè)縮放的比例應(yīng)該是手機(jī)瀏覽器自動(dòng)幫我們做的。
??為了讓iphone和ipad上兼容，且最大利用屏幕分辨率，在不考慮“添加至主屏”從而使瀏覽器激活全屏功能的情況下，地址欄和狀態(tài)欄是個(gè)不得不考慮的因素。地址欄可以通過(guò)讓內(nèi)容超過(guò)一屏，同時(shí)調(diào)用window.scroll(0,0)來(lái)隱藏掉，但狀態(tài)欄和手機(jī)頂部的“信號(hào)、時(shí)間、電池”的那個(gè)欄是無(wú)法隱藏掉的。
?? 也就是說(shuō)，屏幕最大能用的尺寸如下所示：
??
為了防止用戶縮放屏幕，我加了<meta content="user-scalable=0;" name="viewport"> 這一句，這樣瀏覽器的分辨率就可以鎖定了。屏幕橫過(guò)來(lái)最大可用的分辨率尺寸是980*545，而這個(gè)分辨率在ipad下height稍低了一點(diǎn)，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>
?
轉(zhuǎn)載于:https://www.cnblogs.com/cly84920/archive/2011/09/07/4426579.html
總結(jié)
以上是生活随笔為你收集整理的移动开发的分辨率问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 用extjs4做个登录框
- 下一篇： 用setsockopt()来控制recv