这两天在做移动开发的准备，比较纠结于分辨率问题：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{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>