|
分類:[HTML/CSS]
こんにちは。
iPadのSafariで表示しているWeb画面で、次のような現象に悩まされています。(iPad Pro 14.3, .Net Framework 4.7.2, ASP.NET)
Web画面は、左右にコンテンツがあり、
左側にあるコンテンツのWidthを固定値、右側にあるコンテンツのWidthを「100%から左側コンテンツを引いた幅」を指定しています。
初めて表示した時や、更新ボタン押下時は、左右のコンテンツは指定した幅で表示されます。
しかし、iPadに再ログインした時に、Web画面の左側コンテンツが自動的に拡大表示されてしまい、
右側コンテンツの幅が狭くなり、レイアウトが崩れる現象が起きます。
cssの幅指定している箇所などを見直したのですが、
同じ設定でも再現する時としない時があるようで、なかなか問題が特定できません。
viewportタグは次のように指定しています。
"width=device-width, initial-scale=1.0"
このような問題を防ぐ方法や、iPadで拡大表示が行われるパターンなど、ヒントがあれば、お知恵をお借りできないでしょうか。
---css---
body {
margin: 0 auto;
padding: 0 0 0 0;
background-color: gray;
width: 1280px;
}
#page_content {
display: flex;
}
#page_left {
width: 400px;
padding: 0px;
margin-right: 6px;
background-color: lightblue;
}
#page_right {
width: calc(100% - 400px - 6px);
padding: 0px;
background-color: lightgreen;
}
---
---aspx---
<body>
<form id="form1" runat="server">
<div id="page_content">
<section id="page_left">
...
</section>
<section id="page_right">
...
</section>
</div>
</form>
</body>
---
|