iPhoneの右余白をなくす設定

私は、ローカルでメインのページを作った後、動作確認のためにサーバーにアップして画面表示のチェックをします。

すると…パソコン画面の極小幅では表示されなかった余白がiPhone画面では、右端に表れてなーんかスッキリしません。

そこで今日はその右余白をなくす設定をメモしておきます。

まず、<body>直下に<div class="wrap">を書き、コンテンツ内をくくる。</div>は</html>の前。


【index.html】

<html>

<head><title>～</tithe></head>

<body>

<div class="wrap">

～

</div>

</body>

</html>


んでcssに下記を追加するだけ。



【style.css】

.wrap { overflow: hidden; }


body｛overflow: hidden;｝とすると、スマホでスクロールができなくなったりするらしいです。ほかにも別のところを設定するパターンもあるみたいですが、なんかコレが一番シンプルでラクチンかなーと思いました。



MusubuDesign

ほぼ独学 ヒヨコ🐤WEBデザイナーのブログ

0コメント

  • 1000 / 1000