I'm trying to make a website mobile compatible and I'm struggling with the page scrolling mechanism (which the client doesn't want me to change). Here's a link to a simple page that shows the feature I'm struggling with: http://ift.tt/1brSlV3
If you view it on a laptop or desktop, it works as expected i.e. the images remain fixed while the blue & black divs slide over the images. The images also change as expected. I'm not sure how to get it to work on mobile devices.
-
Android devices: As tested with chrome browser on these devices, it works decently (and I can live with this). Instead of the images maintaining a fixed position, they scroll with the divs. So you simply see photos before and after the appropriate divs (instead of the divs sliding over the images).
-
Iphone & Ipad: On these devices (viewed with a Safari browser), it simply looks atrocious and I need to fix this. The images end up in seemingly weird positions and with strange sizes. Pls note that it works well on Safari on mac. I'll try to get a screenshot from iphone asap. Perhaps someone can figure this out by simply looking at the code or visiting that URL with an ios device.
Here's the code on jsfiddle: http://ift.tt/1bECP8P
<!DOCTYPE html>
<html>
<head>
<style>
.pic {
width:800px;
height:600px;
margin: 0px auto;
background-position-x: 50%;
background-position-y: 0%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}
#pic1 {
background: url('http://ift.tt/1brSjfV') no-repeat center center fixed;
}
#pic2 {
background: url('http://ift.tt/1bECNhf') no-repeat center center fixed;
}
.page {
width:800px;
height:400px;
margin: 0px auto;
}
.blue {
background-color: blue;
}
.black {
background-color: black;
}
</style>
</head>
<body>
<div class="page black"></div>
<div class="pic" id="pic1"></div>
<div class="page blue"></div>
<div class="pic" id="pic2"></div>
<div class="page blue"></div>
<div class="page black"></div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire