Prevent Mobile Safari from presenting toolbar when bottom of viewport is tapped

前端未结

关注

 5  1912

We have a simple mobile app running in Mobile Safari (MS) on iOS. When the user scrolls down the page n pixels, a \"top\" button slides up from the bottom. The top butt

相关标签:

5条回答

隐瞒了意图╮

2021-02-02 06:48

The simple solution here is to add about 50px padding-bottom on your bottom most div. Safari seems to think that you are trying to access the bottom navigation bar, unless you click well above the bottom area. With extra padding at bottom, the user will click much higher on the page (not always, but in general).

0 讨论(0)
发布评论:

提交评论
- 加载中...
执念已碎

2021-02-02 06:54
Mika and typeoneerror are correct, but there is a workaround.

The best workaround solution I found (that doesn't require minimal-ui) is to force the bottom navigation of iOS Safari to always stay open/visible. That way, clicks to the bottom of the window never open the bottom navigation since it's always open.

To do that, you just need to apply some CSS and browser targeting with JS. Detailed steps on how:
- How might one force-show the mobile Safari bottom nav bar to show programmatically?
- Buttons aligned to bottom of page conflict with mobile Safari's menu bar
0 讨论(0)
发布评论:

提交评论
- 加载中...
轻奢々

2021-02-02 07:02

No there is not. You can control the content of your webpage but not the behavior of the safari app.

0 讨论(0)
发布评论:

提交评论
- 加载中...
夕颜

2021-02-02 07:03
For iOS 7.1, you can set this in your header to minimize the UI:
```
<meta name="viewport" content="width=device-width, minimal-ui">
```
It was introduced in iOS 7.1 beta 2. This site was instrumental in helping me understand how minimal-ui works: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs
0 讨论(0)
发布评论:

提交评论
- 加载中...

爱一瞬间的悲伤

2021-02-02 07:10

Here's how I'm dealing with this. With a position:fixed;bottom:0 toolbar of my own, I'm adding 44px offset to it (with a semi-transparent buffer zone) shortly after the safari toolbar is hidden (as this is the scenario where a tap near the bottom will reveal the toolbar again).

var min_inner_height = false;
var max_inner_height = false;

var passiveIfSupported = false;
try {
    window.addEventListener("test", null, Object.defineProperty({}, "passive", { 
        get: function () { 
            passiveIfSupported = { 
                passive: true 
            }; 
        } 
    }));
} catch (err) {}

document.addEventListener('scroll', function (e) {
    var win_inner_h = window.innerHeight;
    if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
        if (min_inner_height === false || win_inner_h < min_inner_height) {
            min_inner_height = win_inner_h;
        }
        if ((max_inner_height === false || win_inner_h > max_inner_height) && win_inner_h > min_inner_height) {
            max_inner_height = win_inner_h;
        }
        if (max_inner_height !== false && max_inner_height == win_inner_h) {
            addElementClass(document.body, 'safari-toolbars-hidden');
        } else {
            removeElementClass(document.body, 'safari-toolbars-hidden');
        }
    }
}, passiveIfSupported);

This basically adds the .safari-toolbars-hidden class to the <body> sometime around when they disappear due to the user scrolling down the page.

At this point, I move my own toolbar up the page:

.my-bottom-toolbar { 
    bottom: 0px;
    position: fixed;
}

@supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */
    .my-bottom-toolbar {
        box-shadow: 0 44px 0 rgba(255, 255, 255, 0.8);
        transition: bottom 0.15s ease-in-out; 
    }
    .safari-toolbars-hidden .my-bottom-toolbar {
        bottom: 44px;
    }
}

Hope this helps someone!

Instead of offsetting by a further 44px, you could also add an extra 44px of bottom padding if that works better for your case.

0 讨论(0)