iframe在ios设备宽度不能100%

不知道大家是否有遇到过使用iframe嵌套其他域名的情况。眼下我就遇到了一个项目，项目出于开发中，但是客户要求使用正式域名访问。所以我们在正式服务器上放了一个页面使用iframe嵌套测试域名。但是过程中遇到了一个问题iframe在ios设备宽度不能100%，只能显示一半，如下图：

但是在安卓手机上面访问是正常的。

历经千辛万苦，终于找到一丝眉目。原来当”scrolling”设置为”yes”的时候ios根本就直接忽略了iframe设置的宽度和高度。

CSS部分：

.frame_holder{ width:100%; height:100%;}
.my_frame {width:100%;height:100%;border:0;
}

HTML部分：

<div class="frame_holder"><iframe class="my_frame" id="iframepage" src="http://m.wanhu.com.cn/"></iframe>
</div>

JS部分：

var dw = $(window).width(),dh = $(window).height(),ifmbox = $(".frame_holder"),iframe = $("#iframepage");var cssText = "width:" + dw + "px !important;";
iframe.css("cssText",cssText);if(navigator.userAgent.match(/(iPod|iPhone|iPad)/)){  //判断是苹果设备还是其他设备ifmbox.addClass('ifm-ios');iframe.attr("scrolling","no")； //评估设置设置为no}else{iframe.attr("scrolling","yes")  //安卓设备设置为yesiframe.height(dh)}

案例项目：
http://www.wanhu.com.cn/shouji/ ，找到客户案例，所有手机站案例都可以

iframe在ios设备宽度不能100%相关推荐

【转】使IFRAME在iOS设备上支持滚动
原文链接:Scroll IFRAMEs on iOS 原文日期: 2014年07月02日翻译日期: 2014年07月10日翻译人员:铁锚很长时间以来, iOS设备上Safari中超出边界的元素 ...
使IFRAME在iOS设备上支持滚动
原文链接: Scroll IFRAMEs on iOS 原文日期: 2014年07月02日翻译日期: 2014年07月10日翻译人员: 铁锚很长时间以来, iOS设备上Safari中超出边界的 ...
iframe页面里的链接在ios设备无法点击的解决办法
2019独角兽企业重金招聘Python工程师标准>>> iframe页面,在ios设备浏览器里,滚动后,原来被隐藏的按钮或链接均无法点击,一点击就弹回左上角,可以用下面的方法修正这个 ...
iOS 开发者账号下100台关联设备UDID如何删除替换
iOS 开发者账号下100台关联设备UDID如何删除替换苹果只允许在一个新的会员年刚开始时,才可以为开发者开启设备列表重置入口,其余的时间是不能删除已添加的UDID的. 新会员年开始之后,要主动联系 ...
html5 视口,HTML5样板：元视口和宽度=设备宽度(HTML5 Boilerplate: Meta viewpo
我建立一个自适应/响应的网站. 对此近期变化的HTML5BP: " 移动/ iOS的CSS的修改 " 我已经开始使用: ......我有这在我的CSS: html { -webki ...
html怎么获取设备宽度,css - 在javascript中获取设备宽度
css - 在javascript中获取设备宽度有没有办法使用javascript获取用户设备宽度,而不是视口宽度? 正如我所说,CSS媒体查询提供了这一点 @media screen and (m ...
不通过AppStore,在iOS设备上直接安装应用程序的原理
本文转载至 http://mobile.51cto.com/hot-439095.htm 通过itms-services协议,可以通过safari浏览器直接在iOS设备上安装应用程序.利用这种方式, ...
1 iOS设备的分辨率
都说做iOS开发比Android省心,那么iOS是如何做到这一点的呢?我们今天就来分析一下,希望对做iOS的界面设计的同学有点帮助. 1 iOS设备的分辨率 iOS设备,目前最主要的有3种(Apple ...
如何让一套代码适配所有iOS设备尺寸？
简介:随着移动互联网设备和技术的发展,各种移动设备屏幕尺寸层出不穷,折叠屏.分屏.悬浮窗等等,面对越来越多样的屏幕,如果为每种尺寸单独进行适配,不仅费时费力,还会增加端侧代码的开发与维护压力.如何让一 ...
img标签设置display:block，宽度无法100%
img标签设置display:block,宽度无法100% 一些个人总结,第一次发文章,有什么不足的地方,还请各位多提意见现象如下代码,img标签设置了display:block,尺寸宽度无法设定 ...

iframe在ios设备宽度不能100%

iframe在ios设备宽度不能100%相关推荐

最新文章

热门文章