响应式 iframe - 全屏

Question

这是我的代码：

.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 照片 header，我只需要让它适应移动和桌面屏幕，我想有一个简单的解决方案为此，但我无法弄清楚:(

Answer 1

在查看您网站的源代码时，我发现它无效。您声明了两次文档类型，并且有 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%;
}

Answer 2

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

响应式 iframe - 全屏

Responsive iframe - fullscreen

html

css

wordpress

iframe

responsive