Question

我正在研究一些项目，经过测试后我注意到如果设备有虚拟按钮（屏幕上），那么应该总是固定在底部的div元素就在这些按钮后面。基本上我可以说2个div，一个是100vw 100vh，另一个是100vw宽，高度为60px，而不是高于（堆叠）按钮，它在这些按钮下面，除非用户隐藏他的虚拟按钮，否则是不可见的

有没有办法检测用户是否有虚拟按钮，然后只使用一些JS魔法，还是可以通过简单的CSS解决方案修复？

这是我的代码，还有JS Fiddle。

https://jsfiddle.net/hc9fvdgc/

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    .example {
        width: 100vw;
        height: 100vh;
        background: url('http://dpanoply.s3.amazonaws.com/blog/9-best-sites-for-free-stock-photos/pexels.jpg');
        background-size: 100% 100%;
    }
    .example > .toolbar {
        width: 100vw;
        height: 60px;
        background-color: #b1b1b1;
        border-top: 1px solid #3b3b3b;
        text-align: center;
        font-size: 11px;
        position: fixed;
        bottom: 0;
    }
</style>
<body>
    <div class="example">
        <div class="toolbar">
            <h1>TOOLBAR</h1>
        </div>
    </div>
</body>
</html>

注意：我没有带虚拟按钮的智能手机，所以我无法测试。

位置固定元素隐藏在Android上的虚拟按钮后面

0 个答案: