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照片标题，我只需要让它适合移动和桌面上的屏幕，我想有一个简单的解决方案，但我可以'弄明白:(

Answer 1

在查看您网站的源代码时，我注意到它无效。您声明doctype两次，并有两对开始和结束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 - 全屏

2 个答案: