Question

我有一台便宜的70美元Android 2.3.6智能手机（320px 480px屏幕），上面有最新的Firefox Mobile。我试图获得一个非常基本的网页，其上有一个textarea。每当我点击屏幕上的textarea输入文字时，屏幕键盘会将所有HTML推出屏幕，你无法看到正在键入的内容（非常令人沮丧）。它似乎只发生在Firefox上。内置的Android浏览器工作正常。

以下是代码：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">         
        <style>
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }

            body {
                display: -webkit-flex;
                display: -ms-box;
                display: flex;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                min-height: 100vh;
            }

            header, footer {
                background-color: #000;
                color: #fff;
                height: 35px;
                text-align: center;
            }

            .main {
                -webkit-flex: 1;
                -ms-flex: 1;
                flex: 1;
                background-color: #00cc00;
                height: -moz-calc(100% - 50px);
                height: -webkit-calc(100% - 50px);
                height: calc(100% - 50px);
                text-align: center;
            }

            .textEntry {
                height: 50px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <header>header</header>
        <div class="main">main</div>
        <textarea class="textEntry" placeholder="text here"></textarea>
        <footer>footer</footer>
    </body>
</html>

我曾考虑使用媒体查询隐藏其他元素，看到问题可能是屏幕上没有足够的垂直空间来显示占据屏幕一半的屏幕键盘的所有内容。也许是这样的：

@media screen and (max-height : 220px) {
    footer, .main, header {
        display: none;
    }
}

但这并不能可靠地运作。是否还有其他可以应用的修复/技巧？

三江源！

在屏幕上移动键盘在焦点时隐藏HTML textarea

0 个答案: