IOS webview iframe 宽度超出屏幕解决方案
2018-01-02 16:36
1601 查看
最近在项目中,需要打开外部网页。于是将网页嵌在了iframe标签里面,在PC测试没有问题,自适应良好,但是转入IOS 真机webview中,iframe 却不能很好地适应屏幕大小,总是超出屏幕尺寸,需要左右滚动才能看到完整页面。
谷歌了一天,各种解决方案都试了,都没有用,最后发现综合几种解决方案,有效。代码如下:
<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>
给iframe外面套上一层div,将该样式设置为:”overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;”
给iframe设置属性scrolling=’no’
设置iframe的宽度为:”width: 1px; min-width: 100%; *width: 100%;”
谷歌了一天,各种解决方案都试了,都没有用,最后发现综合几种解决方案,有效。代码如下:
<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%;”
相关文章推荐
- IOS webview iframe 宽度超出屏幕解决方案
- iOS WKwebview 图片适应屏幕,控制图片宽度。
- ios navigationcontroller 滑动返回与webview加载html图片自适应屏幕宽度
- iOS webView图片自适应屏幕宽度
- webview中优酷视频iframe自适应屏幕宽度
- ios webview 图片自适应屏幕宽度
- iOS:webView中图片自适应屏幕的一种解决方案
- Android webView加载,图片宽度超出屏幕宽度
- iOS 设置titleview的宽度为屏幕宽
- iOS 修改webView字体大小,设置宽度及缩放效果
- android textview 中超出屏幕宽度的字符 省略号显示
- android textview 中超出屏幕宽度的字符 省略号显示
- Android WebView显示图片适配屏幕宽度
- ios wkwebview离线化加载h5资源解决方案
- iOS 设置titleview的宽度为屏幕宽
- 【IOS学习笔记】为UICollectionView设置自适应屏幕宽度以及点击效果
- android textview 中超出屏幕宽度的字符 省略号显示
- Android--WebView显示Html,让其中的图片适应屏幕宽度
- iOS cell分割线不能占据整个屏幕宽度解决方案
- iOS使用WebView生成长截图的第3种解决方案