Javascript 当键盘打开时，背景和页脚在phonegap中受到干扰_Javascript_Html_Cordova

Javascript 当键盘打开时，背景和页脚在phonegap中受到干扰

javascript html cordova

Javascript 当键盘打开时，背景和页脚在phonegap中受到干扰,javascript,html,cordova,Javascript,Html,Cordova,我在phonegap中遇到了屏幕问题。我在页面底部有一个后退按钮，但当我打开键盘时，它会在键盘上方移动，并且后退图像会变短。我如何设置它。我的HTML代码是： <body > <div class="wrapper" style="background-image: url('img/1.jpg');"> <div class="container"> <div style=" width: 100%;hei

我在phonegap中遇到了屏幕问题。我在页面底部有一个后退按钮，但当我打开键盘时，它会在键盘上方移动，并且后退图像会变短。我如何设置它。我的HTML代码是：

<body >


 <div  class="wrapper" style="background-image: url('img/1.jpg');">
    <div  class="container">

            <div  style=" width: 100%;height:45%;">
                <img  src="img/logo.png" style="width: 60%;height: 95%;"/>
            </div>  
            <form class="form" id="myForm" method="GET" onSubmit="" style="margin-top: 13%">
            <input type="text" id="email" class="email" name="email" placeholder="Email Address">
            <input type="password" id="pass" class="pass" name="password" placeholder="Pass" style="float: left;">
            <input type="password" id="pass2" class="again" placeholder="Again" style="float: right;">
            <input type="text" id="phone_no" class="phone" name="phone" placeholder="Mobile Number">
            <button type="submit" class="continue" onclick="sign_up_pass();transit()" >Continue</button>
        </form>

<div style="width: 100%;height:auto ; position:absolute; bottom:0;left:0;background-color: black; ">
    <a><img src="img/left_arrow.png" style="float: left ;padding:10px;height:50px"/><p style="text-align: left;line-height: 50px;font-size: 22px;color: #9d988d;font-weight: bolder">Back</p></a></div>
</div>              

</div>
</div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

我的真实屏幕

在键盘或InSpect元素打开后，背面变小，返回按钮启动

请帮忙

当您

css

以百分比设计布局时，一旦软键盘打开，容器就会重新调整大小，因此内容会缩小

解决方案：

在页面加载时，以像素为单位设置

主体的高度，如下所示：
var bodyObj = $("body");
bodyObj.css('height', window.innerHeight + "px");

从您共享的html/css来看，似乎您有一个“包装器”div的背景图像，但您为“容器”div添加了背景属性。您应该为包装器div设置背景属性，以避免背景图像崩溃
但您可以尝试使用position:relative代替position:absolute
<div style="width: 100%;height:auto ; position:absolute; bottom:0;left:0;background-color: black; ">
    <a><img src="img/left_arrow.png" style="float: left ;padding:10px;height:50px"/><p style="text-align: left;line-height: 50px;font-size: 22px;color: #9d988d;font-weight: bolder">Back</p></a></div>
</div> 


背面
问题仍然存在。您可以在这里分享屏幕截图吗？只需使用chrome://inspect
并检查您在窗口中得到的值。innerHeight
查看背景向上和向后按钮当我打开手机上的inspect element或虚拟键盘了解您的信息时，当输入处于焦点时，容器将滚动以在视图点中维护input
<代码>chrome://inspect

是另一回事，而不是

检查元件

。参考

<div style="width: 100%;height:auto ; position:absolute; bottom:0;left:0;background-color: black; ">
    <a><img src="img/left_arrow.png" style="float: left ;padding:10px;height:50px"/><p style="text-align: left;line-height: 50px;font-size: 22px;color: #9d988d;font-weight: bolder">Back</p></a></div>
</div>