移动设备的不同 iframe

Question

我正在尝试将 iframe 添加到 Wordpress 页面。我想为桌面用户显示 iframe A，为移动用户显示 iframe B，因为有些元素不适用于移动设备，同时我不想失去桌面版本的功能。我对编码很陌生，非常欢迎详细解释如何解决这个问题。

Answer 1

一种方法是使用 CSS 媒体查询。 @media(max-width: 540px) 包含仅适用于宽度最多为 540 像素的屏幕的样式（您可以将数字更改为适合您需要的任何数字）。

而且，我想您也可以对 iframe 指向的实际页面执行此操作，这样一开始您就不需要两个 iframe。 IE。在移动设备上将媒体查询直接应用于具有 show/hide 按钮的页面。

/* mobile (you can change 540px to whatever breakpoint you like) */
@media(max-width: 540px) {
  .desktop {
    display: none;
  }
  
  .mobile {
    display: block;
    border: 1px solid red;
  }
}

/* desktop */
@media(min-width: 541px) {
  .desktop {
    display: block;
    border: 1px solid cyan;
  }
  
  .mobile {
    display: none;
  }
}

<iframe class="desktop"></iframe>

<iframe class="mobile"></iframe>