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

eyecatch_smartphone-rollingあなたのサイトは大丈夫?スマホ閲覧時にスクロールすると、画面が左右に揺れませんか?

WORDPRESSのテーマのSTINGER5で、いろいろとカスタマイズを楽しんでいるnekonotesouです。

最近スマホで表示の確認をしてみると…「あれ?スクロールすると画面が横に揺れる!」 これ地味にイライラするんですよね。でも、簡単(強引)に解決する事が出来たのでその方法を紹介します。

スポンサーリンク

はみ出した部分を見えなくするコードを追加する

「ヨッセンス」のヨスさんが記事を参考にしました。ありがとうございます!

以下のコードを追加するだです。

#wrap { overflow : hidden ; }

  STINGER5を使用している私は、#wrapperに追加して修正しました。

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

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

 

Google PageSpeed Insightsで原因を特定して修正する

Google PageSpeed Insightsを使用すれば、どの要素が原因ではみ出しているのか分かります。 分析したいページを入力して、分析ボタンを押すだけです。

分析結果を見ると、320ピクセルの場所に、330ピクセルのコンテンツがあって10ピクセルはみ出してますよと。Googel先生は全てお見通しです!

その下には、見覚えのある項目が…「あっ、この前カスタマイズした所じゃん!」 しっかりと原因を修正したい方は、分析結果を参考に修正して下さい。  

スポンサーリンク
iMacと猫が好きな完全インドア派。

コメントを残す