ios设备使用iframe宽度超出屏幕的解决方法
场景
在做公司官网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 不支持 iframe 的完美解决方法(兼容iOS&安卓)
最近做微信公众号页面,因为入口不同,需要把公共页面抽取出来,然后根据不同的值,传递给后台不同的入口.刚开始用iframe页面嵌套(第一次尝试使用),但发现iOS系统对iframe嵌套页面的高度和定位控制的不到位,具体表现为,当嵌套的子页面的高度大于父页面的高度,且子页面中有触发弹框事件时,这时,如果子页面高度远远大于父页面高度,就会出现弹框找不到的情况,其实可能是在视口以下,弹框的位置只是相对于子页面来定位,并没有相对于视口定位. 尝试了好多种方法,均不理想,而安卓系统则表现良好,于是想到,iO
-
IOS上iframe的滚动条失效的解决办法
问题描述: iframe设置了高度(例如500px).倘若iframe的内容足够长超出了iframe设定的高度时,在ipad等设备上.iframe内部html的滚动条不出现.并且活生生的从500px处截断,(类似overflow:hidden的效果)下面的内容不再显示. 问题重现: 结构: index.html : <style> #iframe{height:500px;} </style> <div id="content"> <ifram
-
iOS中使用schema协议调用APP和使用iframe打开APP的例子
在iOS中,需要调起一个app可以使用schema协议,这是iOS原生支持的,并且因为iOS系统中都不能使用自己的浏览器内核,所以所有的浏览器都支持,这跟android生态不一样,android是可以自己搞内核的,但是iOS不行. 在iOS中提供了两种在浏览器中打开APP的方法:Smart App Banner和schema协议. Smart App Banner 即通过一个meta 标签,在标签上带上app的信息,和打开后的行为,例如:app-id之类的,代码形如: 复制代码 代码如下: <m
-
ios设备使用iframe宽度超出屏幕的解决方法
场景 在做公司官网h5项目时遇到iframe在苹果X手机上右侧超出屏幕的问题,感觉像是被截断一样,但是在其他手机上显示正常. 分析 问题原因:页面a利用iframe嵌入了b,同时设置iframe的宽度为100% ,但是页面b的实际宽度要大于外层设置的100%. 正常情况下,页面b的显示宽度应该为外层赋予的100%,但是在ios上,当iframe内真实宽度大于外层给予的宽度的时候,显示的宽度则为真实宽度. 解决 1.给iframe的外层div添加样式:overflow: auto;-webkit-
-
iOS读取txt文件出现中文乱码的解决方法
一.情景描述: 后台给一个txt文件,编码是utf-8,在Mac电脑Xcode开发环境下读取txt文件内容,汉字会出现乱码,英文没有乱码这种情况. 二.尝试解决方法: 修改编码格式,尝试了NSUTF16StringEncoding,NSUTF8StringEncoding,NSASCIIStringEncoding编码等,出现的问题有时是中文乱码,有时是utf-8不能打开文件问题,最终问题都没能解决. 三.猜测原因: txt文件是从window电脑上创建,有可能和环境有关,第二,编码问题. 四.
-
ios微信浏览器返回不刷新问题完美解决方法
开始用的表单提交,返回参数就丢失,换成url跳转,popstate监听 (注释部分)ios10测试始终有问题,继续搜,最后用pageshow,pagehide完美解决(另外说一句:珍爱生命,远离微信和ios) var wxback = { init :function(){ //隐藏微信分享按钮等 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.call('hid
-
iOS之UIWebView无法获取web标题的解决方法
最近遇到了一个问题,就是在UIWebView的代理方法里,执行document.title的js代码无法获取网页标题,代码如下: - (void)webViewDidFinishLoad:(UIWebView *)webView { // 取加载html文件的标题名 NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"]; } 出现这个问题,我首先确定是不是代码的问题,经过
-
iOS下Safari点击事件失效的解决方法
前言 本文主要给大家介绍了关于在iOS下Safari浏览器点击事件失效的相关解决方案,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. 可以使用下面的代码在 iOS 中进行测试. <!DOCTYPE html> <html> <head> <meta
-
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
在使用ionic开发IOS系统微信的时候会有一个苦恼的问题,填写表单的时候键盘会挡住输入框,其实并不算什么大问题,只要用户输入一个字就可以立刻看见输入框了. 可惜的是,有些客户是不讲理的,他才不管这个问题,反正就是不行,所以在一天睡觉的时候突然惊醒,想出来这个方案. 我就不仔细讲代码了,直接上图 angular.module('MyApp') .directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$io
-
Firefox返回时Iframe的显示Bug的解决方法
<script type="text/javascript">//<![CDATA[ if(getCookie('firefoxIframe')){ document.write('<p id="addAd"><a href="cookie.html">点击这里删除这个iframe</a></p>'); document.write('<iframe height="
-
ios设备中angularjs无法改变页面title的解决方法
如下所示: $rootScope.$watch('title',function(title){ var body = document.getElementsByTagName('body')[0]; document.title = title; var iframe = document.createElement("iframe"); iframe.title = ''; iframe.width = 0; iframe.height = 0; iframe.setAttrib
-
如何在iphon IOS设备上使用二维码
下面给大家介绍下二维码简介 二维码 (2-dimensional bar code) 是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的:在代码编制上巧妙地利用构成计算机内部逻辑基础的"0"."1"比特流的概念,使用若干个与二进制相对应的几何形体来表示文字数值信息,通过图象输入设备或光电扫描设备自动识读以实现信息自动处理: 二维条码/二维码能够在横向和纵向两个方位同时表达信息,因此能在很小的面积内表达大量的信息. 下面介绍下如
随机推荐
- AngularJS 限定$scope的范围实例详解
- webpack配置之后端渲染详解
- java/word+fusionchart生成图表深入分析
- jquery的ajax同步和异步的理解及示例
- Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
- Apache服务器下防止图片盗链的办法
- ThinkPHP采用<volist>实现三级循环代码实例
- Android二维码开发学习教程
- SQL2008中SQL应用之-阻塞(Blocking)应用分析
- 详解MySQL中SlowLog的配置方法(图文)
- jQuery实现点击任意位置弹出层外关闭弹出层效果
- jQuery简单动画变换效果实例分析
- 微信小程序开发教程之增加mixin扩展
- javascript学习(一)构建自己的JS库
- linux下Nginx+Tomcat负载均衡配置方法
- Swift 4最全的新特性详细解析(推荐)
- Python编程pygame模块实现移动的小车示例代码
- Linux内核设备驱动之内存管理笔记整理
- python点击鼠标获取坐标(Graphics)
- Python BS4库的安装与使用详解