1. >
  2. >
  3. スマホの横揺れ解消!一時的な必殺技

スマホの横揺れ解消!一時的な必殺技

スマホのイメージ

スマホで見たらぶよぶよ揺れるとき

レスポンシブなのにスマホにしたら横揺れしてしまう時に、必殺技。
もちろん原因を探して対応するのがベストではありますが、時間がない時に一旦原因を見つけるまでどうにかしたい時にこれ。

めちゃくちゃ無理やりだけど、大体これで横揺れは解消される。
横揺れの原因はURLの折り返しができていないときや画像がデバイスの画面幅を突き抜けてしまっていることが多いので、
このCSSを入れることで、中途半端なところで切ってしまうことになる。

逆に原因の箇所を見つけやすくなることもあるけど、そのままにしておくと読めなかったり、かなり見栄えが良くない場合があるので、すぐに原因を突き止めて対処するようにしよう。

 

横揺れの原因

そもそも横揺れしてしまう原因は、何かがはみ出しているから。

よくあるのは

  • URLが突き抜けている
  • iframeの幅が固定されている
  • 画像がのサイズが固定されている
  • テーブルがレスポンシブ対応していない

広告とかの調整をしていないサイトは今でもよく見かけるので注意したほうがいいです。

インスタとかツイッターフェイスブックを埋め込むときもサイズがデバイス最小幅まで対応しているか確認することをお勧めします。最近のスマホ用の幅は広いですがちょっと前の機種だとはみ出ているということもあります。

横揺れをちゃんと解消する方法

どこが原因がわからないときは、モバイルチェッカーやスピードチェッカーで診断した時に、エラーの箇所を教えてくれます。

モバイルフレンドリーテスト
https://search.google.com/test/mobile-friendly?hl=ja

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja

原因がわかったら解消していきましょう。
先ほどの例で挙げた内容で横揺れしているなら

  • URL・・・対象に word-break: break-all; を入れて強制的に折り返す指示をする。
  • iframe・・・iframeを新しいdiv囲って、max-widthを100%にする。
  • 画像・・・サイズを%指定にする。max-widyhを100%にする。
  • テーブル・・・表が複雑ならsp用に組み直して、Media Queriesでpc・spを切り替える

方法はほかにもあると思いますが、どうしたらいいんだろうと思った時の備忘録です。

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る