Question

我有一个在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>

P.S。如果视图自动滚动以便所选输入字段可见，那将是很好的，但这是一个单独的问题：）

环境：Cordova 5.1.1，Android SDK 23，在Ubuntu 14.04上运行的Android模拟器。

Answer 1

您必须在android:windowSoftInputMode中更改为AndroidManifest.xml的值。

转到platforms/android/文件夹。
打开AndroidManifest.xml文件
在<activity>元素中，将android:windowSoftInputMode的值从"adjustResize"更改为"adjustPan"

可以找到进一步阅读的文档here。

我还建议您使用ionic之类的UI框架，并添加cordova-plugins之类的ionic-plugin-keyboard，例如{{1}}。更好的键盘处理（Cordova UI docs）。

Answer 2

您必须将PX格式的字体大小和高度放在“VH”中，因为VH根据屏幕大小工作。我已经使用PX解决了这个问题。

请查看代码笔

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

2 个答案: