0
我真的需要一些幫助。我正在爲iPhone製作一個「原生的」Web應用程序，我試圖使用jQuery在頁面之間切換。唯一的問題是，每個頁面都有一個.PNG圖像作爲背景，是iPhone屏幕的兩倍大小（因此webkit可以自動縮小它以爲Retina顯示器製作圖像HD）。雖然這一切都很好，但jQuery在轉換頁面之前設法將背景圖像的大小加倍。有人可以幫助我保持圖像大小相同，所以過渡看起來不奇怪嗎？在高清背景圖像iPhone上使用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>
似乎並沒有得以順利。 – MagicMan4293 2012-04-25 02:05:55