When I view my page on a mobile browser (tested on Android JB and iOS 6), it renders fine initially in both portrait and landscape modes. However, the issue arises when I switch from landscape to portrait - the absolute positioned divs are offset from their intended position. Interestingly, if I am zoomed in when I change the orientation, this problem doesn't occur.
This problem is similar to what was discussed here: Strange offset in the CSS element position after changing orientation on iPad, with the only difference being that I am testing on a phone. I have tried the solutions provided in that thread, but they do not seem to work for my case.
Here is the CSS code I am using:
html{
width: 100%;
height: 100%;
}
body{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #000;
}
#container{
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
min-width: 960px;
min-height: 544px;
}
#pic{
display: table;
height: 100%;
width: auto;
margin: 0 auto;
z-index: 5;
}
#links{
position: absolute;
width: 100%;
height: 50px;
bottom: 5px;
left: 0;
right: 0;
z-index: 9;
background: #ccc;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
-moz-opacity: 0.1;
-khtml-opacity: 0.1;
opacity: 0.1;
}
#wrapper{
position: absolute;
width: 100%;
height: 50px;
bottom: 5px;
left: 0;
right: 0;
z-index: 12;
}
#content{
display: table;
width: 100%;
height: 100%;
margin: 0 auto;
}
#content div{
display: inline-block;
*display: inline;
zoom: 1;
width: 20%;
text-align: center;
}
#content div *{
vertical-align: middle;
border: 0;
text-decoration: none;
color: #000;
border-radius: 5px;
}
/* portrait */
@media screen and (orientation:portrait) {
#container{
position:relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
min-width: 960px;
min-height: 544px;
}
}
/* landscape */
@media screen and (orientation:landscape) {
#container{
position:relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
min-width: 960px;
min-height: 544px;
}
}
Despite trying the solutions from the previous question, I still face the same issue. Here is the structure of my HTML:
<div id="container">
<img src="pic_jj.jpg" alt="image" id="pic" />
<div id="links">
</div>
<div id="wrapper">
<div id="content">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
</div>
</div>
If you would like a live demo, you can view my page here. Please note that I am seeking a solution that does not involve JavaScript.
PS. I am using this meta tag:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no;">
Update: Screenshots.
Here is the initial load appearance (normal behavior).
Here is the issue that occurs when changing the orientation from landscape to portrait.