ここで説明されているように Google Maps API を使用しており、ここで定義されているように Adsense 広告をページに追加しました。デバイスの画面サイズに基づいて異なるサイズの広告を表示したいと考えています。現在、デスクトップ ブラウザには小さすぎ、モバイル ブラウザには大きすぎる 1 つのサイズを表示しています。
これを行う方法はありますか?
JavaScript プロパティ screen.width と screen.height を確認してみてください。
それらをコンテナーに配置し、コンテナーを % 幅に設定してから、iframe を同じに設定します。したがって、画面サイズに応じて、追加が拡大してパーセンテージが固定されます。画面を最小化しているユーザーに対応するために、サイズ変更イベントを発生させる必要がある場合があります。例:
あなたのCSS:
.ad-holder{ width: 33%;height: 200px;} //width can be anything you declare
あなたの HTML:
<div class="ad-holder">
<iframe src="the map or ad" width="100%" height="200px" frameborder="0" id="map_options_styling_iframe">
</iframe>
</div>