我真的需要一些帮助。我正在为 iPhone 制作一个“本地外观”的 Web 应用程序，并且我正在尝试使用 jQuery 在页面之间进行转换。唯一的问题是每个页面都有一个 .PNG 图像作为其背景，该图像是 iphone 屏幕大小的两倍（因此 webkit 可以自动将其缩小以使图像高清用于 Retina 显示器）。虽然这一切都很好，但 jQuery 在转换页面之前设法将背景图像的大小加倍。有人可以帮我保持图像大小不变，这样过渡看起来不奇怪吗？
提前致谢！
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="user-scalable=no, width=device-width, height=device- height," />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile- 1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style type="text/css">
body.portrait
#home_bg{
position:absolute;
top:0px;
left:0px;
height:920px;
width:640px;
-webkit-background-size: 100% 100%;
background-image:url('app-design-elements/AppHome.png');
}
body.landscape
#home_bg{
position:absolute;
top:0px;
left:0px;
height:600px;
width:960px;
background-image:url('app-design-elements/AppHomeL.png');
}
body.portrait
#courses_content{
position:absolute;
top:0px;
left:0px;
height:920px;
width:640px;
background-image:url('app-design-elements/TextBG.png');
}
body.landscape
#courses_content{
position:absolute;
top:0px;
left:0px;
height:600px;
width:960px;
background-image:url('app-design-elements/TextBGL.png');
}
body.portrait
#gradhaticon{
position:absolute;
z-index:1;
width:143px;
height:131px;
top:500px;
left:500px;
background-image:url('app-design-elements/Gradhat.png');
}
</style>
<script type="text/javascript">
document.ontouchmove = function(event){
event.preventDefault();
}
</script>
<script type="application/x-javascript">
window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);
function setOrientation() {
var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
var cl = document.body.className;
cl = cl.replace(/portrait|landscape/, orient);
document.body.className = cl;
}
</script>
</head>
<body class="portrait">
<div data-role="page" id="home">
<div id="home_bg"></div>
<div data-role="content">
<div id="gradhaticon" height="131px" width="143px"><a href="#courses" data- transition="fade"><img src="app-design-elements/Gradhat.png" width="143px" height="131px" position="absolute" z-index="1" top="100px" left="50px" /></a></div>
</div>
</div>
<div data-role="page" id="courses">
<div data-role="content">
<div id="courses_content">
<p>Hello World!</p>
<a href="#home" data-transition="fade" data-direction="reverse">BACK!!!</a></div>
</div>
</div>
</body>
</html>