Flexboxを用いた2カラム(メイン、サイドバー)のレスポンシブなレイアウトで、広告の横幅が画面サイズに合わせて可変しないことにより広告を内包する要素も可変せず、小さい画面サイズのとき横幅を超えてしまう現象。

広告が無ければ画面サイズに合わせて要素がちゃんと可変する状況。

 

 

解決策

画面サイズに合わせて要素の横幅が調整される前に大きい広告が読み込まれてしまうせいで横幅を超えてしまっていると考えられます。
なので「defer」でJavascriptの読み込みをHTMLが読み込まれたあとに行わせます。
Google AdSenseを使用している場合、以下のコードが<head></head>内などどこかにあるはずです。(このコードはページ内に広告が複数あっても記述は1箇所で良い)

 

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
このコードの「async」を「defer」に変えることで解決します。
<script defer src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
当サイトではタブレットなどの中途半端な大きさのディスプレイやスマホで「PC版表示」をしたときに発生していた問題でした。
今回は一応「defer」で解決できましたが、CSSの書き方でも解決する方法はあるかと思います。

前の記事

【Android】通知領域に常駐するアプリを目立たなくする方法

【Android】通知領域に常駐するアプリを目立たなくする方法

コメントを残す