Javascript 屏幕上的移动键盘在聚焦时隐藏HTML文本区域_Javascript_Android_Css_Firefox_Flexbox

Javascript 屏幕上的移动键盘在聚焦时隐藏HTML文本区域

javascript android css firefox

Javascript 屏幕上的移动键盘在聚焦时隐藏HTML文本区域,javascript,android,css,firefox,flexbox,Javascript,Android,Css,Firefox,Flexbox,我有一部售价70美元的安卓2.3.6智能手机（320px 480px屏幕），上面有最新的Firefox手机。我正在尝试让一个非常基本的网页运行，它有一个文本区。每当我点击屏幕上的文本区域输入文本时，屏幕上的键盘就会将所有HTML从屏幕上推出来，而你看不到正在输入什么（非常令人沮丧）。这似乎只发生在Firefox上。内置的Android浏览器运行良好代码如下： <!DOCTYPE html> <html> <head> <titl

我有一部售价70美元的安卓2.3.6智能手机（320px 480px屏幕），上面有最新的Firefox手机。我正在尝试让一个非常基本的网页运行，它有一个文本区。每当我点击屏幕上的文本区域输入文本时，屏幕上的键盘就会将所有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>

但这并不可靠。这里是否有其他可以应用的修复/技巧

谢谢

老实说，这听起来更像是Firefox Mobile中的一个bug，而不是您应该尝试在代码中纠正的东西。你有没有想过在我会的网站上提交一个简化的测试用例，谢谢@Robin。你使用的ms前缀属性是错误的。IE10使用此草案：

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