Question

我必须在我的wordpress中嵌入一个链接网站。当其在不同的浏览器中无法适应设备（例如台式机，屏幕尺寸不同的电话）时，“自动”响应宽度和高度。在台式机上很好，但在手机上就断了。

底部填充不是一个好主意。尽管它适用于电话，但台式机却有很多空白。

.iframe-edm {
overflow: hidden; 
position: relative;  
}

.iframe-edm iframe { 
border: 0 ;
height: 100% ;
left: 0 ;
position: absolute ;
top: 0 ;
width: 100% ;}

<div class="iframe-edm"><iframe src="https://abc/index.php/edm?src=mci" 
marginwidth="0" marginheight="0" scrolling="no">
</iframe>
</div>

Answer 1

您是否尝试过放置meta标签？

<meta name="viewport" content="width=device-width, initial-scale=1.0">

编辑1：发表评论后，我对您的代码进行了一些编辑，并且在我的WordPress页面上运行良好。我只是在iframe代码本身中添加了width = 100％。

    <div class="iframe-edm"><iframe src="https://abc/index.php/edm?src=mci" 
      marginwidth="0" marginheight="0" scrolling="no" width="100%">
      </iframe>
      </div>

WordPress中的iframe网站未显示完整尺寸

1 个答案: