解决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加上上面的代码, 导航栏就不会隐藏了

posted on 2018-04-20 09:50  sjpqy  阅读(4057)  评论(0)  编辑  收藏  举报

导航