WordPress

スマホ表示の横揺れはCSSにコードを1行追加するだけで解消!

あなたのサイトは大丈夫?スマホ表示したとき、画面が左右に揺れませんか?

最近、スマホで表示の確認をしてみると……

 

[say img=”https://nekonotesou.net/wp-content/uploads/2016/12/thumbnail.png” name=””]あれ?画面が横に揺れる!?[/say]

 

これ地味にイライラするんですよね。でも簡単に解決する事ができるので、その方法を紹介します。

style.cssにコードを追加する

[codebox title=”style.css”]

#wrap { overflow : hidden ; }

[/codebox]

[codebox title=”STINGER5の場合”]

#wrapper { max-width: 1080px; overflow : hidden ; }

[/codebox]

[box class=”box29″ title=”参考”]

[CSS] スマホ対応は超重要! 私が最低限やっている6つのこと

[/box]

ヨッセンスの、ヨスさんの記事を参考にしました。

ただ、この方法は強引にはみ出している場所を見えなくしているだけなので、根本的な解決にはなっていません。

Google PageSpeed Insightsで原因を特定する

Google PageSpeed Insightsを使用すれば、どの要素が原因ではみ出しているのか分かります。

分析したいページを入力して、分析ボタンを押すだけ。 

ABOUT ME
ねこのてそう
ねこのてそう
妻、娘、ネコと暮らす、超記憶力の悪い30代のオッサン。 好きな言葉は、死ぬこと以外、かすりキズ。 尊敬する人は絵を描ける人とピアノを弾ける人。嫌いなものはタバコ。 元2ちゃんねる管理人ひろゆきが好き。(趣味と思考が似てる) ニコニコ生放送の、暗黒リスナー歴9年。