最近在项目中,需要打开外部网页。于是将网页嵌在了iframe标签里面,在PC测试没有问题,自适应良好,但是转入IOS 真机webview中,iframe 却不能很好地适应屏幕大小,总是超出屏幕尺寸,需要左右滚动才能看到完整页面。
谷歌了一天,各种解决方案都试了,都没有用,最后发现综合几种解决方案,有效。代码如下:
关注我的微信公众号【前端基础教程从0开始】,加我微信,可以免费为您解答问题。回复“1”,拉你进程序员技术讨论群。回复“小程序”,领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”,领取300G前端,Java,微信小程序,Python等资源,让我们一起学前端。
<div style="overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;">
<iframe src="http://www.baidu.com" frameborder="0" height="100%" scrolling='no' style="width: 1px; min-width: 100%; *width: 100%;"></iframe>
</div>
step1
给iframe外面套上一层div,将该样式设置为:”overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;”
step2
给iframe设置属性scrolling=’no’
step3
设置iframe的宽度为:”width: 1px; min-width: 100%; *width: 100%;”