iframe在iphone手机上的问题
问题1:
通过document.addEventListener("scroll",function(){})对页面滚动监听事件进行监听,但ios下$(document).scrollTop()值始终为0,对页面监听无效。
原因:
因为iOS下iframe的高度会根据页面的内容自适应,造成了iframe的高度过高(即iframe的高度>屏幕的高度)。则iframe内部html、body标签即使设置为100%,它的值也是页面所有内容撑开的高度。
解决方法:
将body设置为fixed,宽高设为100%,添加-webkit-overflow-scrolling: touch;在body下写一个div,针对这个div进行scroll监听操作。
html{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
body{
position: fixed;
top:;
left:;
width: 100%;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
问题2:ios中点击,通过display=block或.show()显示元素会跳转顶部。
解决方法:将元素设置为visibility:hidden,通过改变值为"visible"显示元素。
问题3:ios微信中,iframe下长按二维码识别不了。
原因:iframe受微信的安全限制,阻止了默认事件,也可能是父子窗口的原因。
解决思路:看其他文章说可以在iframe中的二维码被按下touchstart的时候,将二维码地址推送至父页面。父页面接收到二维码识别的请求,则创建一个不可见的img元素,src为刚刚传输过来的二维码地址,并且二维码置顶铺满整个屏幕。在touchend与touchcancel时,通知父窗体删除二维码。(具体没有尝试过)
iframe在iphone手机上的问题的更多相关文章
- 在iPhone手机上写了input type="date" 显示不出来的原因
在iPhone手机上写了input type="date" 显示不出来的原因 今天在手机页面上使用新的input类型,这样子写,在chrome浏览器上浏览,很好,显示出来.然后用i ...
- 关于iphone手机上点击事件不起作用
今天调试手机端H5页面的时候,发现一个很坑的问题,绑定的点击事件不起效果,安卓上都没问题,事件能正确触发,但是在iPhone没反应. 开始觉得是写法问题,后来发现,是由于iPhone上,点击的对象,必 ...
- Jquery的$(document).click() 在iphone手机上失效的问题
click事件和 touchstart事件共存 安卓IOS手机都适用 $(document).on("click touchstart", ".demo", f ...
- 禁用iPhone手机浏览器上给电话号码自动加上的link样式
iPhone手机上的浏览器(如Safari),在解析网页的时候会自动给 像是电话号码的数字 加上link样式. 可以添加下面的meta禁用掉这个功能. // //
- 禁用iPhone手机浏览器上给电话号码自动加上的link样式(苹果手机自动给手机号加样式)
原文地址:http://blog.csdn.net/atec2000/article/details/44631633 iPhone手机上的浏览器(如Safari),在解析网页的时候会自动给 像是电话 ...
- iphone手机怎么录屏 两种方法任你挑选
iphone手机怎么录屏呢?苹果手机拥有独特的Airlay镜像投屏,AirPlay的工作原理是当iPhone或IPAD与支持AirPlay技术的硬件,比如Apple TV等设备处在同一个wife的情况 ...
- iPhone手机怎么投屏到电脑上
如今生活水平不断上升,人们更加追求高质量.高享受的生活,所以可以利用一切资源提高生活质量,享受更好的生活体验,比如说手机投屏电脑就可以提高我们的视觉体验,所以更多的人去尝试,那么iPhone手机怎么投 ...
- iPhone手机安全指南
摘要:iPhone手机安全指南 - 1.iPhone解锁使用指纹:2.启用“查找我的iPhone”功能:3.Apple ID启用两步验证:4.修改SIM卡PIN码.5.iPhone被盗或丢失后,登录i ...
- 苹果IPhone手机由于更新了IOS7 Beta测试版导致“激活出错”后,如何还原电话本和照片方法
苹果这狗日的,手段果然狠,因为用户提前升级了测试版又没有更新正式版,就突然把手机变砖头,既不让升级正式版,也不让备份手机中的信息,确实有必要这样吗? 我的手机是IPone4s,在看了6月Apple W ...
随机推荐
- Pycharm学习记录---注释
在方法下面添加三个双引号然后回车即可添加参数注释
- learn about sqlserver files and filegroup
The filegroup is similar as tablespace in Oracle. At first, I will show that hot to check file amd f ...
- C++中STL库函数的基本运用
学了这么长时间的STL库,现在我觉得是有必要对过去的题目和所遇到的问题做一下整理了,以便于之后更好的展开练习: 一. 为什么要用STL库? 1.简单粗暴(省事). 2.便于解决复杂的问题(在贪心题目中 ...
- ubuntu docker中crontab任务不执行的问题
problem of task of crontab in docker of ubuntu do not working! 由于各种原因,要在Ubuntu docker上部署crontab任务,如 ...
- Mac设置Linux免密登陆
利用公钥认证登录 1.创建共钥 输入下面的命令,一路回车 ssh-keygen -t rsa 2.复制公钥到ssh服务器 将上一步生成的id_rsa.pub公钥文件复制到目标服务器对应用户下的~/.s ...
- k8s调度器kube-scheduler
kube-scheduler简介 调度是容器编排的重要环节,需要经过严格的监控和控制,现实生产通常对调度有各类限制,譬如某些服务必须在业务独享的机器上运行,或者从灾备的角度考虑尽量把服务调度到不同机器 ...
- [Redis-CentOS7]Redis设置连接密码(九)
设置Redis密码 修改/etc/redis.conf 一定要强密码redis为内存存储 抗暴力破解强 requirepass password 重启服务 systemctl restart redi ...
- OSCP收集
推荐书籍: 渗透测试:黑客动手入门(+强烈推荐初学者) 黑客:剥削的艺术,第二版 Rtfm:Red Team Field手册 Web应用程序黑客手册:查找和利用安全漏洞 黑客手册:实用指南渗透测试 基 ...
- vue-cli项目传到服务器后打不开的问题
1.vue-cli项目执行dev可以打开网站,直接点击文件或发布后却打不开的问题 webpack.prod.conf.js: output: { ....... publicPath:'./' ...
- GNU make doc - 6.6 追加变量值
有时我们需要对已经定义过的变量进行追加,可以使用+=进行这一操作,就像下面这样 objects += another.o 该语句取objects变量的值,并在其后追加another.o(结果会在原变量 ...