モバイル ブラウザー (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;">
スクリーンショットを更新します。
初期ロードは次のようになります (通常の動作)
向きを横向きから縦向きに変更するとどうなるか
