在移动端布局的时候, 在底部有一个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无法触发的问题的更多相关文章

  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. jmeter常见问题汇总

    Aggregate Report 是 JMeter 常用的一个 Listener,中文被翻译为"聚合报告".今天再次有同行问到这个报告中的各项数据表示什么意思,顺便在这里公布一下, ...

  2. WCF配置问题（配置WCF跨域）

    其它的先放一边.今天先来分享一下前段时间给公司做网站WCF服务接口的心得. 配置文件的配置问题 这里既然讨论WCF配置文件的问题,那么怎么创建的就不一一讲解了.好多博主都有提过的.所以直接分享自己开发 ...

  3. ORACLE 11G R2 RAC classical install OGG12.1(LINUX) 经典抽取模式单项同步配置OGG12.1

    博文结构图如下: 一.环境描述以及注意事项 1.1 环境简介 IP 系统 Oracle版本 OGG版本 源端 172.16.10.16/36 RHEL6.5 oracle11204 12.1 目标端 ...

  4. 2017-2018-1 1623 bug终结者 冲刺005

    bug终结者 冲刺005 by 20162323 周楠 今日任务:理清游戏运行逻辑,GameView类为游戏核心代码 简要介绍 游戏中整个地图都是由数组组成 1.整个地图为16×16格,主要元素有墙. ...

  5. 201621123057 《Java程序设计》第2周学习总结

    一.本周学习总结 基本数据类型 char实质属于整型.boolean类型取值只有true和false两种. 引用数据类型 包装类:自动装箱 与 自动拆箱 数组:一维数组遍历数组用foreach循环:多 ...

  6. python 异步协程

    """A very simple co-routine scheduler. Note: this is written to favour simple code ov ...

  7. 2017 清北济南考前刷题Day 4 afternoon

    期望得分:30+50+30=110 实际得分:40+0+0=40 并查集合并再次写炸... 模拟更相减损术的过程 更相减损术,差一定比被减数小,当被减数=减数时,停止 对于同一个减数来说,会被减 第1 ...

  8. tomcat下的web.xml和项目中的web.xml

    Tomcat 服务器中存在一个web.xml文件 在项目文件夹中同样存在一个web.xml文件 那这两个文件有什么区别呢? tomcat中的web.xml是通用的,如果不设置,那么就会默认是同tomc ...

  9. vue mint-ui 三级地址联动

    我也是第一次写这种地址联动的 刚开始的时候 我还以为直接用select来写 后来公司的ios告知并不是这样的 他说应该时这样的 于是第一想法 赶紧找插件吧 但是找了一会未果  就问了公司大神 他刚开始 ...

  10. 详解k8s一个完整的监控方案(Heapster+Grafana+InfluxDB) - kubernetes

    1.浅析整个监控流程 heapster以k8s内置的cAdvisor作为数据源收集集群信息,并汇总出有价值的性能数据(Metrics):cpu.内存.网络流量等,然后将这些数据输出到外部存储,如Inf ...