How to keep layout unchanged when keyboard is displayed?

问题

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.

How do I do that?

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. It would be nice if the view auto-scrolled so that the selected input field is visible, but that is a separate question :)

Environment: Cordova 5.1.1, Android SDK 23, Android emulator running on Ubuntu 14.04.

回答1:

You have to change to value for android:windowSoftInputMode in the AndroidManifest.xml.

Go to your platforms/android/ folder.
Open AndroidManifest.xml file
In the <activity>element change the value for android:windowSoftInputMode from "adjustResize" to "adjustPan"

Documentation for further reading can be found here.

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).

回答2:

You have to put font-size and height in PX format not in "VH" because VH works according screen size. I have fixed this problem using PX.

Please have a look in code pen

来源：https://stackoverflow.com/questions/39503996/how-to-keep-layout-unchanged-when-keyboard-is-displayed

标签

android

html

css

cordova