ペット プロジェクトの Web アプリをレスポンシブにする作業を行っていますが、モバイル ブラウザーでページを正しく表示できません。私のページは基本的に、コンテナー div、ヘッダー、ナビゲーション バー (デスクトップからモバイルに移動すると横から上に移動する)、およびメイン コンテンツ div として構成され、iPhone でテストするまではすべてが期待どおりに機能していました (両方ともSafari および Firefox) - ヘッダーとナビゲーション バーは正しく表示されますが、コンテンツ div が大きすぎてページが壊れます。ここに私が言いたいことを示すスクリーンショットをいくつか示します(iPhone/Safari はデフォルトのズーム、iPhone はページ全体を表示するためにズームアウト、Firefox では同等のウィンドウ サイズ)。
紛らわしいことに、これはメイン コンテンツの div ( .list) にのみ影響するように見えます。ヘッダーとナビゲーション バーは意図したサイズで表示されますが、動作が異なる原因となるコードを見つけるのに苦労しています。
関連する HTML:
<!DOCTYPE html>
<html>
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
...
</head>
<body>
<div id="container">
<div id="logoheader"><h1>...</h1><h2>...</h2></div>
<div class="buttonbar">...</div>
<div class="list">
<h3>...</h3>
<div class="maintable">
...
...
</div>
</div>
</div>
</body>
</html>
関連する CSS:
body {
height: 100%;
width: 100%;
}
#container {
position: relative;
top: 0;
margin: 0 auto 10px auto;
width: auto;
max-width: 1250px;
min-height: 600px;
white-space: nowrap;
}
#logoheader {
width: auto;
min-width: 888px;
height: auto;
display: block;
}
.buttonbar {
position: absolute;
left: 18px;
width: 90px;
display: inline-block;
}
.list {
position: absolute;
left: 108px;
right: 20px;
min-height: 490px;
min-width: 750px;
display: block;
vertical-align: top;
white-space: normal;
}
.maintable {
font-size: .875rem;
width: auto;
min-height: 406px;
}
@media screen and ( max-width: 600px ) {
#container {
max-width: auto;
min-height: auto;
}
#logoheader {
min-width: auto;
width: 100%;
height: 40px;
}
.buttonbar {
position: relative;
top: 0;
left: 0;
right: 0;
width: 100%;
height: auto;
}
.list {
position: relative;
left: 0;
right: 0;
min-height: auto;
min-width: auto;
width: 100%;
}
.nontable {
min-height: auto;
}
}
