在移动端布局的时候, 在底部有一个button, 页面超过两屏, 是一个可滚动的的网页, 当运行在移动端Safari浏览器上的时候, 向下滑动页面, 浏览器的头部和尾部会自动隐藏, 这样可视区域就会变大, 本来这个设计是很好的, 但是这也跟前端工程师带来麻烦, 当头部和尾部隐藏掉之后, 再点击底部的按钮, 不会触发, 它会自动识别点击了底部, 先把底部和头部显示出来, 再次点击这个按钮时才会触发, 这就导致了底部按钮需要点击两次才能触发, QA肯定是不愿意的, 用户更是不愿意的, 废话不多说, 看效果你就明白了

看的不是很清晰, 就是在下滑的时候头部和底部会自动隐藏, 点击按钮时, 先显示底部和头部导航, 再次点击的时候才会触发onclick事件

上个代码, 布局很简单, 放到Safari浏览器上运行就明白了

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  6.     <title>safari</title>
  7.     <style type="text/css">
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         .box {
  13.             height: 2000px;
  14.             background-color: #eee;
  15.         }
  16.         #btn {
  17.             height: 40px;
  18.             line-height: 40px;
  19.             font-size: 18px;
  20.             color: #fff;
  21.             text-align: center;
  22.             border: none;
  23.             outline: none;
  24.             background-color: #f66;
  25.             width: 100%;
  26.             position: fixed;
  27.             bottom: 0;
  28.             left: 0;
  29.             right: 0;
  30.         }
  31.         .count {
  32.             height: 20px;
  33.             line-height: 20px;
  34.             font-size: 14px;
  35.             background-color: #66f;
  36.             color: #fff;
  37.             padding: 0 10px;
  38.             position: fixed;
  39.             top: 10px;
  40.             left: 10px;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45. <div class="box"></div>
  46. <button id="btn">点击</button>
  47. <div class="count">0</div>
  48. </body>
  49. <script type="text/javascript" src="./jquery.js"></script>
  50. <script type="text/javascript">
  51.     var a = 0;
  52.     $('#btn').on('click', function() {
  53.         a += 1;
  54.         $('.count').html(a)
  55.     })
  56. </script>
  57. </html>

解决的办法就是, 滚动的时候不让底部和头部导航隐藏, 这样就不会有问题了, 但是经过一番搜索之后, 用js没有办法控制浏览器的盗汗栏不消失, 最后..终于在公司大佬的帮助下解决了, 其实非常简单, 简单到用css就完美解决了

  1.         html, body {
  2.             height: 100%;
  3.             overflow: auto;
  4.         }

就是给body加上上面的代码, 导航栏就不会隐藏了

解决IOS移动端 Safari流浪器 onclick无法触发的问题的更多相关文章

  1. 解决ios移动端双击页面下移

    ios移动端在双击弹出层的时候会出现页面下移,露出底层页面的现象 解决办法: <!DOCTYPE html> <html> <head> <meta char ...

  2. 解决IOS移动端固定定位失效问题

    根据浏览器窗口position:fixed; 定位在底部的元素,会随着屏幕的滚动而滚动,在iOS系统上不起作用. <div class="header">头部</ ...

  3. 移动端上传照片 预览+Draw on Canvas's Demo（解决 iOS 等设备照片旋转 90 度的 bug）

    背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...

  4. 解决IOS safari在input focus弹出输入法时不支持position fixed的问题

    该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...

  5. 解决ios、微信移动端的position: fixed; 支持性不好的问题 && 禁用下拉暴露黑底的功能

    解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问 ...

  6. 移动端-解决ios连续点击页面上移问题

    引入js即可 //解决ios双击页面上移问题//在项目中测试不紧input/button这些表单控件有这个问题,p,div等也有问题,于是乎就直接在body开刀了(function(){ var ag ...

  7. js时间操作getTime(),ios移动端真机上返回显示NAN

    ios移动端,js时间操作getTime(),getFullYear()等返回显示NaN的解决办法及原因 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间 ...

  8. 【iOS】使用safari对webview进行调试

    [iOS]使用safari对webview进行调试 在web开发的过程中,抓包.调试页面样式.查看请求头是很常用的技巧.其实在iOS开发中,这些技巧也能用(无论是模拟器还是真机),不过我们需要用到ma ...

  9. 解决ios下的微信打开的页面背景音乐无法自动播放

    后面的项目发现,还有两个坑,需要注意下: ·本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监 ...

随机推荐

  1. 01_搭建Linux虚拟机（下）_我的Linux之路

    原文发布在特克斯博客www.susmote.com ​ 上一节已经给大家讲解了如何用VMware安装虚拟机,但是只讲了在VMware里面的操作 接下来我们讲在Linux内部的安装步骤 首先我们启动Li ...

  2. 2017年PHP程序员未来路在何方——韩天峰

    PHP 从诞生到现在已经有20多年历史,从Web时代兴起到移动互联网退潮,互联网领域各种编程语言和技术层出不穷, Node.js . GO . Python 不断地在挑战 PHP 的地位.这些技术的推 ...

  3. 201621123062《java程序设计》第九周作业总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 思维导图1:(对集合部分做了一些改动和细化) 思维导图2:(泛型) 1.2 选做:收集你认为有用的代码片段 代 ...

  4. 和为S的连续正数序列——牛客网（剑指offer）

    题目描述 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数).没多久,他 ...

  5. swift 编写欢迎界面-- ios开发

    转载自:http://blog.csdn.net/u014455765/article/details/49622947 现在很多iOS开发人员都从oc转向Swift, swift 也必将成为ios开 ...

  6. 201621123068 《Java程序设计》第1周学习总结

    1. 本周学习总结 本周学习了如何使用Java来编写程序,还没展开学习具体的语言,但是也花了大量的时间搞清楚Java运行的原理.明白了Java是一种可以跨平台运行语言,搞清了jdk,jre,jvm之间 ...

  7. [USACO13JAN] Seating

    https://www.luogu.org/problem/show?pid=3071 题目描述 To earn some extra money, the cows have opened a re ...

  8. react基础篇入门组件

    讲述一下React: 1.声明式设计-React采用声明范式,可以轻松描述应用 2.高效-React通过DOM模型,最大限度的减少dom的交互 3.灵活-React可以与已知的库或框架很好的配合 4. ...

  9. 再议Python协程——从yield到asyncio

    协程,英文名Coroutine.前面介绍Python的多线程,以及用多线程实现并发(参见这篇文章[浅析Python多线程]),今天介绍的协程也是常用的并发手段.本篇主要内容包含:协程的基本概念.协程库 ...

  10. day-5 python协程与I/O编程深入浅出

    基于python编程语言环境,重新学习了一遍操作系统IO编程基本知识,同时也学习了什么是协程,通过实际编程,了解进程+协程的优势. 一.python协程编程实现 1.  什么是协程(以下内容来自维基百 ...