响应式 iframe - 全屏答案

【问题标题】：Responsive iframe - fullscreen响应式 iframe - 全屏
【发布时间】：2016-10-29 20:00:16
【问题描述】：

这是我的代码：

.myIframe {
position: relative;
padding-bottom: 56.25;
padding-top:30px;
height: 100%;
overflow: auto; 
-webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY 
border: solid black 1px;
} 
.myIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

这是我的网站：http://www.simtek.ro，iframe 是 360 照片标题，我只需要使其适合移动设备和桌面设备的屏幕，我想有一个简单的解决方案，但我想不通出来了:(

【问题讨论】：

标签： html css wordpress iframe responsive

【解决方案1】：

在查看您网站的源代码时，我注意到它是无效的。您声明了 doctype 两次，并有 2 对打开和关闭 html 标记。关于原始问题尝试：

.myIframe {
height: 100vh;
overflow: auto; 
-webkit-overflow-scrolling:touch;
border: solid black 1px;
} 
.myIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

【讨论】：

效果很好，非常感谢！！我现在正在尝试删除按钮，完成水印我现在正在尝试删除手机上的全屏按钮和 vrmode..

【解决方案2】：

使用这个 javascript 插件，您可以使无响应的元素（如 iframe）具有响应性。 https://dollarshaveclub.github.io/reframe.js/

【讨论】：