如果在小型设备上，请将 iframe 替换为错误文本

Question

我网站上的 iframe 中有内容在小屏幕上看起来不太好*。它与页面的边缘重叠。我不希望用户使用 iframe 内容，我希望将其更改为基于图像的错误消息（见下文）。我知道媒体查询，我认为它们可能与解决方案有关。也许display: none？或者也许JavaScript/jQuery显示/隐藏函数？这是我到目前为止的代码...

<iframe id="content" width="485" height="402" frameborder="0" src="http://www.google.com/" allowtransparency="true"></iframe>

我希望错误消息是...

<img id="error" src="error.png" width="100%" alt="Error text goes here" title="Error Message">
<p>This content is not available on small screens like yours. Change to a bigger screen to see the content.</p>

顺便说一下，我知道iframe在HTML5中被贬低了，但它们是在我的网站上显示我需要的内容的唯一方法。

*我将"小屏幕"定义为宽度小于 725px 的浏览器大小。

Answer 1

使用媒体查询：

.hide-small {
        display: block
    }
.show-small {
        display: none
    }
@media screen and (max-width: 725px) {
    .hide-small {
        display: none!important;
    }
    .show-small {
        display: block!important
    }
}

使用 jquery在 HTML 正文中

$(window).ready(function(){
if ($( window ).width() > 750) {
  $('.hide-small').show();
  $('.show-small').hide();
} else{
  $('.hide-small').hide();
  $('.show-small').show();
}

和 html：

<div class="hide-small"><iframe></div>
<div class="show-small">Text for small screen</div>

就我个人而言，媒体查询看起来更好，但问题有Javascript和jquery标签，并且可以使用javascript来完成。编辑：调整了宽度限制

Answer 2

将其

添加到标题中：<meta name="viewport" content="width=device-width">

那么这是代码：

#moblie {display: none;}
@media screen and (max-width : 725px ){
	#moblie {display: inline-block;}
	#iframe {display: none;}
}

<div id="iframe">
<iframe width="485" height="402" frameborder="0" src="http://www.google.com/" allowtransparency="true"></iframe>
</div>
<div id="moblie">
<p>This content is not available on small screens like yours. Change to a bigger screen to see the content.</p>
</div>