Fatal编程技术网
  • android/
  • Android 显示键盘时如何保持布局不变？

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

android html css cordova

Android 显示键盘时如何保持布局不变？,android,html,css,cordova,Android,Html,Css,Cordova,我有一个以科尔多瓦代码运行的html应用程序的玩具示例，下面列出了与视口大小相关的所有内容：位置：绝对值和百分比，或字体的vh单位 出乎意料的是，当显示键盘时，视口垂直收缩，导致第二个屏幕截图中显示的布局 ) 我希望初始布局与此处完全相同，相对于视口的全宽/全高，但在显示键盘时不改变大小；相反，它应该保持在键盘出现之前的高度 我该怎么做 HTML/CSS代码： <!DOCTYPE html> <html> <head> <meta name="viewp

我有一个以科尔多瓦代码运行的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 emulator。

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

请查看代码笔

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

请查看代码笔

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

转到您的platforms/android/文件夹

打开AndroidManifest.xml文件

在公园里

我还建议使用诸如ionic之类的UI框架，并添加诸如ionic plugin keyboard之类的cordova插件，以便更好地处理键盘。

您必须在AndroidManifest.xml中更改为android的值：WindowsofInputMode

转到您的platforms/android/文件夹

打开AndroidManifest.xml文件

在公园里

我还建议使用诸如ionic之类的UI框架，并添加诸如ionic plugin keyboard之类的cordova插件，以便更好地处理键盘。

您好，Santosh，谢谢，但我希望所有布局最初都与视口大小相关，包括字体大小等。我只希望在初始布局后不会更改。这将在分辨率非常不同的设备上进行，因此px大小将无法正常工作。您可以在FOUS jQuery上编写。这意味着当你把注意力集中在输入类型上时，CSS应该是我在PX中提供的，在模糊之后它将是VH。你好，桑托什，谢谢你，但我希望所有布局都是相对于视口大小完成的，最初包括字体大小等。我只希望它在初始布局后不会改变。这将在分辨率非常不同的设备上进行，因此px大小将无法正常工作。您可以在FOUS jQuery上编写。这意味着，当你把注意力集中在输入类型上时，CSS应该是我在PX中提供的，而在模糊之后，它将是在VH中。这非常有效！对科尔多瓦来说，这应该是这个问题的典型答案。我希望它能获得大量的投票：这很好用！对科尔多瓦来说，这应该是这个问题的典型答案。我希望它能获得大量选票：