iPhoneでは普通のサイトもAndroidで確認するとサイトの右に余白ができることがあります。今回はその解消方法です。
調べると3つほど解決法があります。
- min-widthを指定してみる
- viewportを確認する
- 全体をwrapしてoverflow: hidden;
１と２は他のサイトでご紹介されてましたが、今回ケースではうまくいかなかったので、割愛します。
３の全体をwrapしてoverflow: hidden;
をご紹介します。
全体をwrapしてoverflow: hidden;
まずはhtmlにを下記のようにbody直下、/bodyの直上で<div class=”wrap”>などで、全体を筒で行きます。
<body>
<div class="wrap">
<header></header>
<div class="main">
<p>コンテンツが入ります</p>
<!-- /.main --></div>
<footer></footer>
<!-- /.wrap --></div>
</body>
次に、CSSで先程の<div class="wrap">に下記のようにoverflow: hidden;（内容がボックスに収まらない場合、収まらない部分は非表示となります。）指示します。
.wrap { overflow: hidden; }
これで、解決しました。
以上です。
どうぞご活用ください。
ご相談・お仕事の依頼について
【お気軽ご相談ください】
WEB制作・WEBマーケティングについてなど、気になる点があればお気軽にお問い合わせください。
【個別講座承ります】
貴社サイトの悩みや改善したい点など、こちらが教えながら一緒に改善するオーダーメイド個別講座も承っております。
【Web担当承ります】
貴社のWeb担当者としてもビジネス目的に合わせた形でサポートいたします。まずはお気軽にご相談ください。
