Question

我正面临着phonegap中的屏幕问题。我在页面底部有一个后退按钮，但是当我打开键盘时，它会在键盘上方，背景图像变得更短。我如何设置它。我的HTML代码是：< / p>

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

我的css代码是：

 @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 1000;
}
body {
  font-family: 'montserrat_alternatesregular';
  color: #DCDCDC;
  font-weight: 1000;

}
body ::-webkit-input-placeholder {
  /* WebKit browsers */
  font-family: 'montserrat_alternatesregular';
  color: #DCDCDC;
  font-weight: 1000;
}
body :-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
 font-family: 'montserrat_alternatesregular';
  color: #DCDCDC;
  opacity: 1;
  font-weight: 1000;
}
body ::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  font-family: 'montserrat_alternatesregular';
  color: #DCDCDC;
  opacity: 1;
  font-weight: 1000;
}
body :-ms-input-placeholder {
  /* Internet Explorer 10+ */
  font-family: 'montserrat_alternatesregular';
  color: #DCDCDC;
  font-weight: 1000;
}
a{

    text-decoration: none;
    color: white
}



.wrapper {

  left:0;
  top:0;
  background-size:100% 100%;
  background-repeat: no-repeat;

}
.wrapper.form-success .container h1 {
  -webkit-transform: translateY(85px);
      -ms-transform: translateY(85px);
          transform: translateY(85px);
}
.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  background-size:cover;
  background-repeat: no-repeat;
  text-align: center;
}
.container h1 {
  font-size: 70px;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-put;
          transition-timing-function: ease-in-put;
  font-weight: 150;
}

我的实际屏幕

键盘或inpspect elemnt打开后，backround变小，后退按钮上升

请帮助

Answer 1

当您public static String getDataUsingPostRequest(String urlStr, String inputJson) { String result = null; try{ URL url = new URL(urlStr); HttpURLConnection conn = (HttpURLConnection) url.openConnection(); conn.setConnectTimeout(15000); conn.setRequestMethod("POST"); conn.setRequestProperty("Accept", "application/json"); conn.setRequestProperty("Content-type", "application/json"); conn.setDoInput(true); conn.setDoOutput(true); conn.connect(); OutputStream os = conn.getOutputStream(); BufferedWriter writer = new BufferedWriter( new OutputStreamWriter(os, "UTF-8")); writer.write(inputJson); writer.flush(); writer.close(); os.close(); BufferedReader reader = new BufferedReader(new InputStreamReader( conn.getInputStream())); StringBuilder sb = new StringBuilder(); String line = null; while ((line = reader.readLine()) != null) { sb.append(line); } result = sb.toString(); }catch(Exception e){ e.printStackTrace(); } return result; }布局按百分比设计时，一旦软键盘打开，容器会重新调整大小，因此内容会缩小。

<强>解决方案：

在页面加载时，设置css的高度，以像素为单位：

body

Answer 2

从你分享的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>

键盘打开时，背景和页脚在手机屏障中会分散注意力

2 个答案: