I really need some help. I'm making a "native looking" web app for the iPhone and I'm trying to use jQuery to transition between the pages. The only issue is that each page has a .PNG image as its background that is double the size of the iphone screen (so webkit can automatically shrink it to make the image HD for the Retina Display). While that's all well and good, jQuery somehow manages to double the size of the background image before it transitions the pages. Can someone help me keep the image size the same so the transition doesn't look weird?
Thanks in advance!
<!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>
