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

【问题标题】：How to keep layout unchanged when keyboard is displayed?显示键盘时如何保持布局不变？
【发布时间】：2016-09-15 05:56:47
【问题描述】：

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

附：如果视图自动滚动以使所选输入字段可见，那就太好了，但这是一个单独的问题:)

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

【问题讨论】：

标签： android html css cordova

【解决方案1】：

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

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

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

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

【讨论】：

这很好用！对于科尔多瓦来说，这应该是这个问题的规范答案。我希望它得到大量的支持:)

【解决方案2】：

您必须将字体大小和高度设置为 PX 格式而不是“VH”，因为 VH 根据屏幕尺寸工作。我已经使用 PX 解决了这个问题。

请看代码笔

【讨论】：

您好 Santosh，谢谢，但我希望所有布局最初都与视口大小相关（包括字体大小等）。我只是希望它在初始布局后不改变。这将在分辨率非常不同的设备上进行，因此 px 大小将无法正常工作。
你可以写上Fous jQuery。意味着当您专注于输入类型时，CSS 应该是我提供的（在 PX 中），并且在模糊之后它将在 VH 中。