显示键盘时如何保持布局不变? [英] How to keep layout unchanged when keyboard is displayed?
问题描述
我有一个在Cordova中运行的html应用程序的玩具示例(下面的代码)，其中布置了与视口大小相关的所有内容(position:绝对和百分比，或字体的vh单位).
I have a toy example of a html app running in Cordova (code below) which is laid out with everything relative to the viewport size (either position:absolute and percent, or vh units for fonts).
出乎意料的是，当显示键盘时，视口会垂直收缩，从而导致第二个屏幕快照中所示的布局.
Unexpectedly, when a keyboard is shown, the viewport shrinks vertically resulting in the layout shown in the second screenshot.
;
我希望相对于视口的整个宽度/高度完全按照此处的原始布局进行设置，但要使其在显示键盘时不改变大小；而是应该保持与键盘出现之前一样高.
I would like the initial layout to be done exactly as it is here, relative to the full width/height of the viewport, but for it to not change size when the keyboard is displayed; rather it should stay as tall as it was before the keyboard showed up.
我该怎么做?
HTML/CSS代码:
HTML/CSS code:
<!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.如果视图自动滚动以使选定的输入字段可见，那将是很好的选择，但这是一个单独的问题:)
P.S. It would be nice if the view auto-scrolled so that the selected input field is visible, but that is a separate question :)
环境:Cordova 5.1.1，Android SDK 23，在Ubuntu 14.04上运行的Android模拟器.
Environment: Cordova 5.1.1, Android SDK 23, Android emulator running on Ubuntu 14.04.
推荐答案
您必须在 AndroidManifest.xml 中更改为 android:windowSoftInputMode 的值.
You have to change to value for android:windowSoftInputMode in the AndroidManifest.xml.
-
转到您的
platforms/android/文件夹.
打开 AndroidManifest.xml 文件
在< activity> 元素中，将 android:windowSoftInputMode 的值从"adjustResize" 更改为"AdjustPan"
In the <activity>element change the value for android:windowSoftInputMode from "adjustResize" to "adjustPan"
可以在此处找到文档以供进一步阅读
Documentation for further reading can be found here.
我还建议使用UI框架(例如 ionic )，并添加 cordova-plugins (例如 ionic-plugin-keyboard ).更好的键盘处理( Cordova UI文档).
I would also recommend to use UI Frameworks like ionic and adding cordova-plugins like ionic-plugin-keyboard for e.g. better keyboard handling (Cordova UI docs).
这篇关于显示键盘时如何保持布局不变?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
