键盘显示时如何保持布局不变？

Question

键盘显示时如何保持布局不变？

Ale*_*x I 1 html css android css3 cordova

我有一个在Cordova中运行的html应用程序的玩具示例(下面的代码),其中列出了与视口大小相关的所有内容(位置:绝对和百分比,或字体的vh单位).

出乎意料的是,当显示键盘时,视口会垂直缩小,从而导致第二个屏幕截图中显示的布局.

;

我希望初始布局与此处完全相同,相对于视口的整个宽度/高度,但是当键盘显示时它不会改变大小; 相反它应该保持与键盘出现之前一样高.

我怎么做？

HTML/CSS代码:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

<style type="text/css">

.main {
    font-size: 4vh;
    color: #000000;
    position:absolute;
    top:12%;
    left:5%;
    width:90%;"
}

.button {
    background: #006000;
    font-size: 4vh;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    position:absolute;
    top:85%;
    left:0%;
    width:100%;
    height:15%
}

html,body {
    height: 100%;
    width:100%;
    background-color:#FFFFFF;
    overflow: hidden;
}

</style>
</head>
<body>

<div class="screen">
    <div class="main">
    Type in something:<br/><br/>
    <input type="text">
    </div>

    <div class="button">
    Next
    </div>
</div>



</body>
</html>

Run Code Online (Sandbox Code Playgroud)

PS如果视图自动滚动以便所选输入字段可见,那将是很好的,但这是一个单独的问题:)

环境:Cordova 5.1.1,Android SDK 23,在Ubuntu 14.04上运行的Android模拟器.

Answer 1

Bea*_*eat 7

你必须改变,以价值android:windowSoftInputMode的AndroidManifest.xml.

转到您的platforms/android/文件夹.
打开AndroidManifest.xml文件
在<activity>元件为改变该值android:windowSoftInputMode从"adjustResize"至"adjustPan"

有关进一步阅读的文档可在此处找到.

我还建议使用UI框架之类的,ionic并添加cordova-plugins类似于ionic-plugin-keyboard更好的键盘处理(Cordova UI文档).

归档时间：	9 年，4 月前
查看次数：	1857 次
最近记录：	9 年，4 月前