在带有高清背景图像的iPhone上使用jQuery页面转换
我真的需要一些帮助。我正在为iPhone制作一个看起来像本地人的web应用程序，我正在尝试使用jQuery在页面之间进行转换。唯一的问题是，每个页面都有一个.PNG图像作为背景，它的大小是iphone屏幕的两倍，因此webkit可以自动缩小它，使图像高清显示在视网膜上。尽管这一切都很好，jQuery还是设法在转换页面之前将背景图像的大小增加了一倍。有人能帮我保持图像大小不变，这样过渡看起来就不会奇怪了吗 提前谢谢在带有高清背景图像的iPhone上使用jQuery页面转换,jquery,iphone,background,transition,retina-display,Jquery,Iphone,Background,Transition,Retina Display,我真的需要一些帮助。我正在为iPhone制作一个看起来像本地人的web应用程序，我正在尝试使用jQuery在页面之间进行转换。唯一的问题是，每个页面都有一个.PNG图像作为背景，它的大小是iphone屏幕的两倍，因此webkit可以自动缩小它，使图像高清显示在视网膜上。尽管这一切都很好，jQuery还是设法在转换页面之前将背景图像的大小增加了一倍。有人能帮我保持图像大小不变，这样过渡看起来就不会奇怪了吗 提前谢谢 <!DOCTYPE html> <html> <
<!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>
尝试使用媒体查询为更高分辨率的显示器指定@2x图像
尝试在图像url后添加背景大小，例如：
background-image:url('app-design-elements/AppHome.png');
-webkit-background-size: 100% 100%;