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 ...
随机推荐
- Codeforces_478_C
http://codeforces.com/problemset/problem/478/C 水. #include<stdio.h> int main() { long long a,b ...
- jsp作用域问题
jsp的四大作用域,还是要注意一下,刚才练习javabean输入时间,第一次有个地方写错了,之后改过来之后,刷新tomcat,但是时间一直不变,很奇怪, 最后发现<useBean>标签里面 ...
- 用反射、泛型 改造SqlHelper
1. 数据准备 public class BaseModel { public int Id { set; get; } } public class Company : BaseModel { p ...
- 博客圆美化主题推荐之Slience
博客圆美化主题推荐之Slience 一.前言 本博客美化主题作者为:Esofar,本文仅在教导如何快速把该美化主题应用到自己的博客中,详细部署内容见Silence - 专注于阅读的博客园主题. 二.博 ...
- 准备 Python3 和 Python 虚拟环境
1.安装依赖包 yum -y install wget gcc epel-release git 2.安装 Python3.6 yum -y install python36 python36-dev ...
- 杭电-------2042不容易系列之二(C语言写)
/* 根据题意,知道了最终只剩下了3只羊,应该是从最后一步向前推算,但是因为题意的测试布置一个 可以从只有一个收费站算起,知道本次需要就算的收费站,这样之后有小于此数目的可以直接输出, 大于此数目的也 ...
- 修改centos7容器的时间和宿主机时间一致
一.问题 centos7系统容器时间与宿主机系统时间不一致,就进去查看一番,发现时区和宿主机上的时间不一致,下面就来解决一下 二.现象 1.查看centos宿主机的时间 输入如下命令查看 # date ...
- VS2015中使用qt开发客户端,QPluginLoader加载dll为null的解决办法
1,问题重现: 使用vs2015开发一款qt软件,使用了QPluginLoader动态加载插件的方式,调试的时候,发现dll模块没有加载进来,debug发现QPluginLoader的instance ...
- implements Serializable有什么作用?
没有implements Serializable,你就不能通过rmi(包括ejb)提供远程调用.serialization 允许你将实现了Serializable接口的对象转换为字节序列,这些字节序 ...
- C#设计模式学习笔记:(16)观察者模式
本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7928521.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲行为型设计模式的第四个模式--观 ...