【问题标题】: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/

    【讨论】:

      猜你喜欢
      • 2019-02-01
      • 1970-01-01
      • 2017-06-14
      • 2012-09-21
      • 2014-06-26
      • 2021-06-05
      • 1970-01-01
      • 2019-10-03
      • 1970-01-01
      相关资源
      最近更新 更多