如何解决仅在移动设备上使iframe全屏显示的最佳方法是什么?
我有一个iframe,只想在移动设备上全屏显示。我看到了在所有屏幕上全屏显示的解决方案,但这不是我想要的。
这是我到目前为止的代码:
<p align="center"><iframe src="LINK" title="iframe" width="900" height="650" frameBorder="0"></p>
</iframe>
我应该在桌面上使用百分比来表示宽度和高度,对吗?但是我不知道该怎么做,并且在移动设备上将宽度和高度设置为100%。
解决方法
只需使用媒体查询:
<iframe class="iframe" src="https://www.google.com/" frameborder="0"></iframe>
.iframe {
width: 100vw;
height: 100vh;
}
@media (min-width: 600px) {
.iframe {
width: 600px;
height: 600px;
}
}
https://codepen.io/seanstopnik/pen/51c4cf447763a01468f7f517518b619f
,要覆盖整个视口,可以使用:
<p align="center">
<iframe src="LINK" title="iframe" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;" frameBorder="0">
</iframe>
</p>
这将填充您要填充的整个页面或部分。
要在移动设备上应用,请从iframe标记中删除嵌入式样式代码,然后在css文件中使用以下媒体查询:
@media only screen and (max-width: 768px) {
/* For mobile phones: */
iframe {
position:fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
width:100%;
height:100%;
border:none;
margin:0;
padding:0;
overflow:hidden;
z-index:999999;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。