根據屏幕大小更改 iframe 內容

Question

您好，我有一個問題，我有一個無法調整大小的廣告，支持人員說我可以使用 2 個廣告 1 用於移動設備 1 用於桌面設備，因此廣告為 720 x 90，另一個為 300 x 100 我想要它根據碎石大小在這兩者之間切換：

<iframe border=0 frameborder=0 marginheight=0 marginwidth=0 width=736 height=98 scrolling=no allowtransparency=true src=zzzz></iframe>

和

<iframe border=0 frameborder=0 marginheight=0 marginwidth=0 width=300 height=100 scrolling=no allowtransparency=true src=iiiiii></iframe>

如果有人可以幫助我，我將不勝感激。 謝謝。

Answer 1

您可以對這兩項進行編碼，並根據瀏覽器大小通過 CSS 隱藏一項。

<iframe class='lg' border=0 frameborder=0 marginheight=0 marginwidth=0 width=736 height=98 scrolling=no allowtransparency=true src=zzzz></iframe>

<iframe class='sm' border=0 frameborder=0 marginheight=0 marginwidth=0 width=300 height=100 scrolling=no allowtransparency=true src=iiiiii></iframe>

CSS :

@media (max-width: 719px) { //set max width to your preferred mobile width.  I used 719 because your large banner is 720.
    .lg {display:none;}
    .sm {display:initial;}
}

@media (min-width: 720px) { //set min width to be larger than the css rule above.
    .lg {display:initial;}
    .sm {display:none;}
}