iframe的响应式处理

由于要展示一个其他网站的页面,所以用到了iframe,虽然网上看到iframe有种种的问题和缺点,但是其实对我来说倒无所谓。

但是遇到了一些问题:iframe并不能自动适应不同设备的分辨率大小,导致在电脑上看大小正常,但是手机浏览就过大了,所以尝试解决这个问题。

问题:
使用的iframe窗口不能自动适应不同设备的不同分辨率,导致在部分设备上体验不好。

解决方法:
对"iframe"标签作处理。

1
2
3
4
5
6
7
8
9
<iframe
src="https://tabbycats.club/cat/16o880"
height=445
width="100%"
id="frame_full"
frameborder="0"
scrolling="no"
onload="this.style.height=document.body.clientHeight-50" name="SpaceBug">
</iframe>

width设置为100%,同时配合onload获得body的宽度,就能实现iframe窗口随不同分辨率来变化,至于height直接设置高度,虽然不是按照比例缩放,但效果也还不错

解决思路来自:iframe框架嵌套技巧(全屏,去双滚动条)


iframe的响应式处理
http://argon-gas.top/p/4501.html
作者
Sun
发布于
2022年7月20日
许可协议