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中已经过折旧，但它们是我在网站上显示所需内容的唯一方式。

*我定义了一个小屏幕＆＃39;浏览器大小的宽度小于725像素。

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">

然后这是代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果在小型设备上使用错误文本

2 个答案: