私は本当に助けが必要です。私は iPhone 用の「ネイティブに見える」Web アプリを作成しており、jQuery を使用してページ間を移行しようとしています。唯一の問題は、各ページの背景として、iPhone 画面の 2 倍のサイズの .PNG 画像があることです (そのため、Webkit は自動的に画像を縮小して、Retina ディスプレイ用に画像を HD にすることができます)。それはそれで良いのですが、jQuery は、ページを遷移する前に背景画像のサイズを 2 倍にすることに成功しています。トランジションが奇妙に見えないように、誰かが画像サイズを同じに保つのを手伝ってくれますか?
前もって感謝します！
<!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>