更改在移動設備上使用哪個html代碼

Question

我正嘗試使用自定義HTML模塊將Instagram幻燈片小部件嵌入到我的Joomla網站中。我想根據用戶是在移動設備上還是在桌面/筆記本上修改幻燈片窗口小部件的大小。這可能嗎？

我試圖使用Widget是SnapWidget，他們的HTML看起來像這樣（我已經隱藏了的Instagram帳戶的匿名來源）：

<iframe src="http://snapwidget.com/sl/..." width="505px" height="505px" class="snapwidget-widget" style="border: none; overflow: hidden; width: 505px; height: 505px;" title="Instagram Widget" frameborder="0" scrolling="no"></iframe> 

在此先感謝。

Answer 1

只需添加媒體查詢到的style.css模板：

@media (max-width: 644px) { 
 
    iframe { 
 
    max-width: 100%; 
 
    } 
 
}