在移动浏览器上查看我的页面（在 Android JB 和 iOS 6 上测试）在最初以纵向和横向模式加载时呈现良好。但是，当我从横向转到纵向时，绝对定位的 div 会偏离它们实际应该在的位置。奇怪的是，如果我在改变方向时放大，这个问题不会出现。
这与此处提到的问题相同：在 iPad 上更改方向后 CSS 元素位置的奇怪偏移 唯一的区别是我正在手机上进行测试。我尝试了那里提供的解决方案，但它们似乎不起作用。
这是我的 CSS
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;
}
}
如您所见，我已经尝试了另一个不起作用的问题的解决方案。还有我的 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>
如果您需要现场演示，可以在这里查看我的页面。我可能应该提到我正在寻找一个非 js 解决方案。
PS。我正在使用这个元标记：
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no;">
更新截图。
这是初始负载的样子（正常行为）
当我将方向从横向更改为纵向时，会发生以下情况
