Google AdSense の表示を PC とスマホで切替える
AdSense の貼り方について検索していると，PC の場合は記事下にレクタングル大を横並びで2つ(ダブルレクタングル)，スマホの場合には規約違反にならないようにレスポンシブの広告を1つ貼るような方法が推奨されています．ただ AdSense の広告掲載に関するポリシー を読むと下記のように書かれており，レクタングル大で広告を非表示にするというのは規約的にまずいのかなと思いました．
禁止されているコードの改変方法
AdSense コードを以下の方法で改変することは禁止されています。
- display:none などを使用して広告ユニットを隠す（ただし、レスポンシブ広告ユニットを実装している場合を除く）
- ...
そこで，レスポンシブ広告を使ってレクタングル大相当の広告を2つ表示する方式というのを実装してみました．
HTML の修正
まずは HTML から修正していきます．デスクトップの場合にはテーブルにして横並びで2つ表示し，モバイルの場合にはそのまま1つ表示するようにします．デスクトップ向けの部分は div タグで囲いクラス名を ad_desktop にしておきます．またデスクトプ向けに表示する，それぞれの広告のクラスに ad_rectangle を追加しておきます．モバイル向けの部分は div タグで囲いクラス名を ad_mobile にしておきます．
広告の ID などは適宜置き換えて下さい．
<!--- adsense for desktop -->
<div class="ad_desktop" align="center">
<table style="border:none">
<tr>
<!--- left side ad -->
<td style="border:none">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive-desktop1 -->
<ins class="adsbygoogle ad_rectangle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</td>
<!--- right side ad -->
<td style="border:none">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive-desktop2 -->
<ins class="adsbygoogle ad_rectangle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</td>
</tr>
</table>
</div>
<!--- adsense for mobile -->
<div class="ad_mobile">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive-mobile -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
CSS の修正
次に CSS に下記を追加します．通常の場合は ad_rectangle クラスは幅336px高さ280pxでレクタングル大と同等の大きさになるようにしています．その後のメディアクエリ内で，幅が767px以下の場合には .ad_desktop { display: none !important; } でデスクトップ向け広告を非表示，逆に幅が768px以上の場合には .ad_mobile { display: none !important; } でモバイル向け広告を非表示にするようにしています．
.ad_rectangle {
width: 336px;
height: 280px;
}
@media only screen and (max-width: 767px) {
.ad_desktop {
display: none !important;
}
}
@media only screen and (min-width: 768px) {
.ad_mobile {
display: none !important;
}
}
ブラウザの横幅を調整して読み込むことで，表示される AdSense が変わるのが確認できるかと思います．