iframe 宽度不适合移动设备上的纵向方向答案

【问题标题】：iframe width doesnt fit on portrait orientation on mobileiframe 宽度不适合移动设备上的纵向方向
【发布时间】：2017-04-05 20:26:10
【问题描述】：

我在我的网站上使用以下 iframe 代码。

.callrates {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: scroll !important;
    -webkit-overflow-scrolling:touch !important;
    height:500px;
}

.callrates iframe {
    position: relative;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="callrates">
    <iframe src="https://www.xyz.php" width="200px" height="0" allowfullscreen=" " frameborder="0" scroll="no"></iframe>
</div>

问题是当我从移动设备纵向查看它时，iframe 的宽度大于屏幕尺寸，因此使其水平和垂直滚动。我希望整个宽度适合屏幕。我该怎么做？

【问题讨论】：

iframe 的 width 属性为 200px，其优先级高于 CSS width: 100%。
即使我将该宽度属性更改为任何值，它也不会改变任何内容。问题仍然存在。我尝试将宽度属性保持为空白甚至“0”，但没有帮助。

标签： html css iframe width responsiveness

【解决方案1】：

查看此代码笔：http://codepen.io/anon/pen/YpZgYm

<iframe src="https://www.xyz.php" width="" height="0" allowfullscreen=" " frameborder="0" scroll="no">

更新：

可能不是最优雅的解决方案，但如果无法使 iframe 源页面具有响应性，您可以缩小 iframe 内容。

尝试添加

iframe{
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
}

【讨论】：

不会改变任何东西。还是一样。
设置溢出后会有滚动条：scroll !important;但是宽度会自动调整
有滚动条。但我的问题是我希望全宽 iframe 适合屏幕，并有一个宽度滚动条。我希望你明白我的意思。
如果 iframe 内容的内容为 400px 且无响应。无论父框架的宽度如何，框架内容仍将占用 400px 宽度。这必须在框架源 CSS 中进行控制。
好的。应该在 iframe 源文件中添加什么？