作業概要
横幅固定のGoogle AdSenseを画面幅に応じてPC用、SP用に切り替えるJavaScriptを作成した。
作業内容
ウィジェット内にPC用、SP用のGoogle AdSenseコード（HTMLコード）を記述し、加えて、その広告の表示を切り替えるJavaScriptコードを記述した。
コードについて
window.matchMediaを使用して、画面幅に応じてPC用、SP用の広告の表示を切り替える処理を実装した。window.matchMediaは、DOMのリサイズイベントよりも遥かに効率がいいと思う。
DOMのリサイズイベントは、リサイズのたびに処理が実行されるが、window.matchMediaは指定した画面幅に達した時に処理が実行される。
工夫
表示切り替えの処理で「display:none;」など、displayプロパティで表示/非表示を切り替えるのではなく、height,widhtを0にする方法で非表示にした。
理由としては、ページ読み込み後すぐに広告を非表示にすると、適切に読み込み/表示処理が行われない。ページ読み込みご、ページ画面幅を変えて広告が表示される画面幅にしたとき、広告を非表示にしていたせいで、広告のコンテンツの読み込みがされず広告の表示領域部分が空白となる。
一方、height,widthを0にすれば、ページ読み込み後は非表示だが、画面幅を変えると表示されるようになった。
