Question

我有一个phonegap应用程序，其基本布局是通过在单击某些项目时翻译div来控制的。缩短版本如下所示：

HTML

<body>
    <h1 class="main">
        The Market Coffee Cart
    </h1>
    <div class="app">


        <div id="home" class="page">
            <p> Welcome to the market coffee cart</p>
            <!-- <div class="leftHalf"> Login</div> -->
            <div class="guestLogin"> Continue as Guest</div>
        </div>



        <!-- KIND -->
        <div id="itemType" class="page right">
            <p>What would you like to order?</p>
            <div id="coffee" class="type">
                Coffee
            </div>
            <div id="tea" class="type">
                Tea
            </div>
            <div id="others" class="type">
                Soda and specialties
            </div>
            <div id="snack" class="type">
                Snacks
            </div>
        </div>
  </body>

真正负责显示和隐藏事物的css看起来像这样：

CSS

.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.page.left {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.page.center {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.page.right {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.page.transition {
    -webkit-transition: .25s;
    transition-duration: .25s;
}

我遇到的问题是在我的某些页面上需要输入文本。当文本框获得焦点时，内容将向左移动，我的布局将被破坏。看照片。我该如何防止这种情况？

注意

我已经尝试了here和here的解决方案，但它们没有效果。他们要添加<preference name="KeyboardShrinksView" value="false" />和<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>，但这不会做任何事情。有趣的是，每个人都警告不要设置最后一个属性，但无论如何我都尝试过，但无济于事。

以下是我希望看到的内容： enter image description here

以下是键盘出现后的外观（然后隐藏）： enter image description here

非常感谢任何想法。

Answer 1

在设置 keyboardshrinksview 偏好设置之前，您是否尝试在cordova项目中安装键盘插件？

https://github.com/apache/cordova-plugins/tree/master/keyboard

如果未首先安装插件，则首选项将无法正常工作。

iOS上的Phonegap，屏幕键盘正在改变我的内容

1 个答案: