iphone在iframe页面的宽度不受父页面影响,避免撑开页面
工作中有个需求,就是产品页面通过iframe引用显示产品协议页,要求不要横向滑动,只需要竖向滑动,但在iphone中引用的iframe会撑开父页的宽度,而在android端浏览器这不会。
<div style="width: 100%; height: 300px; overflow-x: hidden; overflow: scroll; -webkit-overflow-scrolling: touch;">
<iframe src="contract.html" name="contract" width="100%" height="300" scrolling="no" frameborder="0"></iframe>
</div>
通过在iframe添加一滑动层,overflow-x: hidden; 会直接将iframe超出的部分隐藏掉,可以知道超出不是iframe的宽度。具体超出的宽度是怎么来的,在网上没找到原因。(希望大侠们指点,谢谢)
所以只能只能对iphone和ipad端做个兼容,修改iframe页面body页面宽度。将其设置为页面实际宽度相对与屏幕宽度比(设备的宽度)。
//适配iphone上iframe宽度不是chengk页面的宽度不受父页面
window.onload = function(){
alert("网页可见区域宽:"+document.body.clientWidth+"\n 屏幕可用工作区宽度:"+ window.screen.availWidth+"\n"); if (!navigator.userAgent.match(/iPad|iPhone/i))
return false;
//如果是iphone,ipad,则重新修改body宽度值
document.body.style.width = (window.screen.availWidth/document.body.clientWidth)*100+'%';
}
iphone在iframe页面的宽度不受父页面影响,避免撑开页面的更多相关文章
- iframe在iphone6 plus的safari下子页面的宽度不受父页面控制的bug
这是想要的效果: 样式设置是iframe外面的宽度为100%,iframe的宽度为父元素的90%,高度为宽度 除以1.6,固定比例, 正常显示就是上面的样子,但是,问题出现在iphone特定手机特定版 ...
- 内嵌iframe页面在IOS下会受内部元素影响自动撑开的问题
IOS下的webview页面,内嵌iframe元素,将其样式指定为宽高100%: .iframe { width: %; height: %; } 在安卓下运行均无问题,但是在IOS下会出现异常. 具 ...
- 在pos:a元素不设定宽度的情况下,他的最大宽度是受父元素的宽度所限制的。
<div style="width:80px;height:50px;position:relative;left:50px;"> <ul style=" ...
- PC端判断屏幕宽度到达手机宽度的时候,直接跳转手机页面
<script> // //判断屏幕宽度到达手机宽度的时候,直接跳转手机页面 // window.addEventListener("resize", function ...
- jquery、js获取页面高度宽度等
jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...
- JavaScript获取屏幕和页面的宽度和高度
JavaScript获取屏幕和页面的宽度和高度 1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- 关于iframe的父页面调取子页面里的事件(父往子里传)
在body里打开一个iframe页面,想要调取打开的这个页面里的函数: $('iframe')[0].contentWindow.sonFn(canshu); [0]:比如在index.html页面里 ...
- A4纸网页打印 html网页页面的宽度设置成多少
A4纸竖向打印,html网页页面的宽度设置成多少?这个问题是我们大家所疑惑的,于是网上搜集整理下,希望可以帮助你们 最近开发项目时遇到了网页打印的问题,这是问题之二,打印宽度设置 在公制长度单位与屏幕 ...
- 关于使用struts2时子窗体页面跳转后在父窗体打开的问题以及Session过期后的页面跳转问题
问题1:传统的系统界面,iframe了三个页面,上,左,右,用户点击注销的按钮在上面得top.jsp里面,方法:<a href="../adminAction/admin_logout ...
随机推荐
- C++类的存储(部分可用与c的结构体)
c++中最重要的就是类,那么给你一个类的对象,你知道它在内存中如何存储的吗?它占内存中多少个字节? 首先确定类的构成: 1,数据成员:可以是内置类型,类类型. 2,函数成员:虚函数,非虚函数 1)数据 ...
- [Angular Tutorial] 9 -Routing & Multiple Views
在这一步中,您将学到如何创建一个布局模板,并且学习怎样使用一个叫做ngRoute的Angular模块来构建一个具有多重视图的应用. ·当您现在访问/index.html,您将被重定向到/index.h ...
- bzoj2599
2599: [IOI2011]Race Time Limit: 70 Sec Memory Limit: 128 MBSubmit: 2476 Solved: 733[Submit][Status ...
- 使用PHPMailer发送带附件并支持HTML内容的邮件
PHPMailer是一个封装好的PHP邮件发送类,支持发送HTML内容的电子邮件,以及可以添加附件发送,并不像PHP本身mail()函数需要服务器环境支持,您只需要设置邮件服务器以相关信息就能实现邮件 ...
- 《R包的分类介绍》
R分析空间数据(Spatial Data) R机器学习包(Machine Learning) R多元统计包(Multivariate Statistics) R药物(代谢)动力学数据分析包 R计算计量 ...
- iOS 之 static
函数体内的static变量的作用范围是该函数体,在内存中只分配一次,下次调用时仍维持上次的值. 模块内的static全局变量可以被模块内的所有函数访问,但是不能被模块外的其它函数访问. 模块内的sta ...
- PHP中file_exists与is_file、is_dir的区别,以及执行效率的比较
判断文件是否存在,有2个常用的PHP函数:is_file 和 file_exists, 判断文件夹是否存在,有2个常用PHP函数:is_dir 和 file_exists, 即 file_exists ...
- Delphi的ListView自动排序
private SortCol: Integer; SortWay: Integer; procedure TForm1.LVweColumnClick(Sender: TObject; Column ...
- spring框架学习(三)junit单元测试
spring框架学习(三)junit单元测试 单元测试不是头一次听说了,但只是听说从来没有用过.一个模块怎么测试呢,是不是得专门为一单元写一个测试程序,然后将测试单元代码拿过来测试? 我是这么想的.学 ...
- QT移植
QT下载地址:http://download.qt.io/archive/qt/1.编译tslib(touch screen lib) 准备工作:确保以下工具安装完成 sudo apt-get ins ...