在移動端布局的時候, 在底部有一個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加上上面的代碼, 導航欄就不會隱藏了
