解决IOS移动端 Safari流浪器 onclick无法触发的问题
在移动端布局的时候, 在底部有一个button, 页面超过两屏, 是一个可滚动的的网页, 当运行在移动端Safari浏览器上的时候, 向下滑动页面, 浏览器的头部和尾部会自动隐藏, 这样可视区域就会变大, 本来这个设计是很好的, 但是这也跟前端工程师带来麻烦, 当头部和尾部隐藏掉之后, 再点击底部的按钮, 不会触发, 它会自动识别点击了底部, 先把底部和头部显示出来, 再次点击这个按钮时才会触发, 这就导致了底部按钮需要点击两次才能触发, QA肯定是不愿意的, 用户更是不愿意的, 废话不多说, 看效果你就明白了
看的不是很清晰, 就是在下滑的时候头部和底部会自动隐藏, 点击按钮时, 先显示底部和头部导航, 再次点击的时候才会触发onclick事件
上个代码, 布局很简单, 放到Safari浏览器上运行就明白了
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
- <title>safari</title>
- <style type="text/css">
- * {
- margin: 0;
- padding: 0;
- }
- .box {
- height: 2000px;
- background-color: #eee;
- }
- #btn {
- height: 40px;
- line-height: 40px;
- font-size: 18px;
- color: #fff;
- text-align: center;
- border: none;
- outline: none;
- background-color: #f66;
- width: 100%;
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- }
- .count {
- height: 20px;
- line-height: 20px;
- font-size: 14px;
- background-color: #66f;
- color: #fff;
- padding: 0 10px;
- position: fixed;
- top: 10px;
- left: 10px;
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- <button id="btn">点击</button>
- <div class="count">0</div>
- </body>
- <script type="text/javascript" src="./jquery.js"></script>
- <script type="text/javascript">
- var a = 0;
- $('#btn').on('click', function() {
- a += 1;
- $('.count').html(a)
- })
- </script>
- </html>
解决的办法就是, 滚动的时候不让底部和头部导航隐藏, 这样就不会有问题了, 但是经过一番搜索之后, 用js没有办法控制浏览器的盗汗栏不消失, 最后..终于在公司大佬的帮助下解决了, 其实非常简单, 简单到用css就完美解决了
- html, body {
- height: 100%;
- overflow: auto;
- }
就是给body加上上面的代码, 导航栏就不会隐藏了
解决IOS移动端 Safari流浪器 onclick无法触发的问题的更多相关文章
- 解决ios移动端双击页面下移
ios移动端在双击弹出层的时候会出现页面下移,露出底层页面的现象 解决办法: <!DOCTYPE html> <html> <head> <meta char ...
- 解决IOS移动端固定定位失效问题
根据浏览器窗口position:fixed; 定位在底部的元素,会随着屏幕的滚动而滚动,在iOS系统上不起作用. <div class="header">头部</ ...
- 移动端上传照片 预览+Draw on Canvas's Demo(解决 iOS 等设备照片旋转 90 度的 bug)
背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...
- 解决IOS safari在input focus弹出输入法时不支持position fixed的问题
该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...
- 解决ios、微信移动端的position: fixed; 支持性不好的问题 && 禁用下拉暴露黑底的功能
解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问 ...
- 移动端-解决ios连续点击页面上移问题
引入js即可 //解决ios双击页面上移问题//在项目中测试不紧input/button这些表单控件有这个问题,p,div等也有问题,于是乎就直接在body开刀了(function(){ var ag ...
- js时间操作getTime(),ios移动端真机上返回显示NAN
ios移动端,js时间操作getTime(),getFullYear()等返回显示NaN的解决办法及原因 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间 ...
- 【iOS】使用safari对webview进行调试
[iOS]使用safari对webview进行调试 在web开发的过程中,抓包.调试页面样式.查看请求头是很常用的技巧.其实在iOS开发中,这些技巧也能用(无论是模拟器还是真机),不过我们需要用到ma ...
- 解决ios下的微信打开的页面背景音乐无法自动播放
后面的项目发现,还有两个坑,需要注意下: ·本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监 ...
随机推荐
- 01_搭建Linux虚拟机(下)_我的Linux之路
原文发布在特克斯博客www.susmote.com 上一节已经给大家讲解了如何用VMware安装虚拟机,但是只讲了在VMware里面的操作 接下来我们讲在Linux内部的安装步骤 首先我们启动Li ...
- 2017年PHP程序员未来路在何方——韩天峰
PHP 从诞生到现在已经有20多年历史,从Web时代兴起到移动互联网退潮,互联网领域各种编程语言和技术层出不穷, Node.js . GO . Python 不断地在挑战 PHP 的地位.这些技术的推 ...
- 201621123062《java程序设计》第九周作业总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 思维导图1:(对集合部分做了一些改动和细化) 思维导图2:(泛型) 1.2 选做:收集你认为有用的代码片段 代 ...
- 和为S的连续正数序列——牛客网(剑指offer)
题目描述 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数).没多久,他 ...
- swift 编写欢迎界面-- ios开发
转载自:http://blog.csdn.net/u014455765/article/details/49622947 现在很多iOS开发人员都从oc转向Swift, swift 也必将成为ios开 ...
- 201621123068 《Java程序设计》第1周学习总结
1. 本周学习总结 本周学习了如何使用Java来编写程序,还没展开学习具体的语言,但是也花了大量的时间搞清楚Java运行的原理.明白了Java是一种可以跨平台运行语言,搞清了jdk,jre,jvm之间 ...
- [USACO13JAN] Seating
https://www.luogu.org/problem/show?pid=3071 题目描述 To earn some extra money, the cows have opened a re ...
- react基础篇入门组件
讲述一下React: 1.声明式设计-React采用声明范式,可以轻松描述应用 2.高效-React通过DOM模型,最大限度的减少dom的交互 3.灵活-React可以与已知的库或框架很好的配合 4. ...
- 再议Python协程——从yield到asyncio
协程,英文名Coroutine.前面介绍Python的多线程,以及用多线程实现并发(参见这篇文章[浅析Python多线程]),今天介绍的协程也是常用的并发手段.本篇主要内容包含:协程的基本概念.协程库 ...
- day-5 python协程与I/O编程深入浅出
基于python编程语言环境,重新学习了一遍操作系统IO编程基本知识,同时也学习了什么是协程,通过实际编程,了解进程+协程的优势. 一.python协程编程实现 1. 什么是协程(以下内容来自维基百 ...