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担当者として月額サポートします。
Web365は貴社のWeb担当者として、制作改善運用をワンストップ定額サポートしています
・成果にこだわるサイト制作改善をお望みの方
・良いweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方
是非Web365までご相談ください。
Web制作+Webマーケティングの個別講座開講中
Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております
・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
どうぞWeb365の個別講座をご覧ください。
