スマホの画面が揺れるのを防止する方法

最近、ウェブサイトをレスポンシブ・デザインに変更する作業を行うことが多くなりました。また、新しいサイトは最初からレスポンシブ・デザインで作るようになりました。

そこで気がついたのですが、スマホの実機でチェックすると、画面が横に揺れてしまいます。これはエミュレーターを使って、動作確認をしていると気がつかないので、ちゃんと実機を使う必要性を痛感します。

原因は何かと言うと、デザインしたサイトの横幅がデバイスのブラウザーの実際の横幅よりも大きいためです。

原因は全てこれですが、こうなってしまうには、さらにその原因があります。

まず、単純に横幅を取った場合、width:100%とだけしていれば、問題がありません。しかし、これにmarginをつけると、はみ出します。しかし、それは普通気がつきますよね。

実はpaddingやborderをつけても、はみ出すのです。borderが、はみ出すのは、画像ファイルを扱った経験から、私も知っていましたが、paddingがはみ出すようになったのは初耳でした。昔は、paddingは領域内の余白でしたが、いつの間にか仕様が変わって、領域の外にpaddingが取られるようになったらしいです。

本当は、元からpaddingは領域の外であると言う定義だったらしいのですが、Internet Explorer 6では、バグのため、paddingが領域内部に取られていました。Internet Explorer 6は、かつて、シェア第一位でしたから、全員これに習って、paddingは領域内に取っていました。

ところが、今は、本来の定義に戻ったと言うわけです。

しかし、スマホ用の画面を設計する場合、paddingが領域の外では、計算するのが面倒ですね。そこで、これを領域内で計算する方法が定義されることとなったようです。これは便利なので、覚えておくといいです。ついでにborderも領域内になります。外になるのは、marginだけです。

それには、paddingなどの値を定義する前に、下記の記述を入れればいいです。

box-sizing: border-box

これですべて解決かと思ったら、実はそうではありません。

幅を指定するのに、vw(viewpoint width)を使いませんか?

vwはデバイスの幅を元にした値になるので、レスポンシブ・デザインでは重宝します。だから使いたくなります。もしvwを使うと、横幅いっぱいであれば、100vwとなります。しかし、これがだめなのです。

SafariやChromeなどのブラウザーがスマホでは勝手に左だけにマージンを取りますので、100vwから98vwでは右にはみ出します。その結果、画面が揺れてしまいます。画面が揺れないようにするためには、97vwから95vwぐらいにする必要があります。97vwだと右の余白が少ないので、左右のバランスが取れません。95vwだとiPhoneはいいのですが、Androidでは右の余白が少し広めになります。

まあ、100%にしておけばこういう問題は出ないのですが、vwを使うと要注意です。100vwと100%は違うというわけです。ややこしいですね。