ios设备使用iframe宽度超出屏幕的解决方法
2019-07-16 08:33
1301 查看
场景
在做公司官网h5项目时遇到iframe在苹果X手机上右侧超出屏幕的问题,感觉像是被截断一样,但是在其他手机上显示正常。
分析
问题原因:页面a利用iframe嵌入了b,同时设置iframe的宽度为100% ,但是页面b的实际宽度要大于外层设置的100%。
正常情况下,页面b的显示宽度应该为外层赋予的100%,但是在ios上,当iframe内真实宽度大于外层给予的宽度的时候,显示的宽度则为真实宽度。
解决
1、给iframe的外层div添加样式:overflow: auto;-webkit-overflow-scrolling:touch;width:100%;
2、给iframe设置属性scrolling='no'
3、给iframe设置样式:width: 1px; min-width: 100%; *width: 100%;
<div style="overflow: auto;-webkit-overflow-scrolling:touch;width:100%;"> <iframe height="100%" scrolling="no" style="width: 1px; min-width: 100%; *width: 100%;" src="https://juejin.im/timeline"> </iframe> </div>
附:iframe在IOS里如何自适应宽度?
iframe自动变宽了,在IOS手机上出现滚动条
第一步:定义 iframe 中的scrolling属性为no,设置iframe中不显示滚动条。
<iframe scrolling="no" ></iframe>
第二步:设置iframe的样式为如下所示
iframe{ overflow: scroll; -webkit-overflow-scrolling: touch; min-width: 100%; *width:100%; width:1px; }
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
相关文章推荐
- iOS使用WKWebView加载HTML5不显示屏幕宽度的问题解决
- IOS webview iframe 宽度超出屏幕解决方案
- IOS webview iframe 宽度超出屏幕解决方案
- iOS开发:XIB使用时,快速设置控件的宽度为屏幕一半的宽度的等比例方法
- Java使用Oracle遇到的最大游标超出问题及其解决方法
- Android 解决65535的限制 使用android-support-multidex解决Dex超出方法数的限制问题,让你的应用不再爆棚
- 保持iOS设备屏幕常亮的方法
- 表格里使用text-overflow后不能隐藏超出的文本的解决方法
- Android 使用android-support-multidex解决Dex超出方法数的限制问题,让你的应用不再爆棚
- Android 使用android-support-multidex解决Dex超出方法数的限制问题,让你的应用不再爆棚
- 保持iOS设备屏幕常亮的方法
- 使用android USB API 无法获取USB设备的解决方法
- iOS 使用第三方SDK x86_64错误解决方法
- Android 使用android-support-multidex解决Dex超出方法数的限制问题,让你的应用不再爆棚
- quick-cocos2dx使用windows下向导生成的IOS工程在MAC下编译报错的解决方法
- iOS 获取屏幕分辨率大小错误的解决方法
- Android 使用android-support-multidex解决Dex超出方法数的限制问题,让你的应用不再爆棚
- HierarchyView的实现原理和Android设备无法使用HierarchyView的解决方法
- iOS 上常用的两个功能:点击屏幕和return退出隐藏键盘和解决虚拟键盘挡住UITextField的方法
- easyui 之tab和portal 在IE9下使用iframe时报未定义错误的解决方法