[英]Background and footer get distored in phonegap when keyboard opens
我在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>
而我的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;
}
請幫忙
由於
css
布局是按百分比設計的,因此一旦打開軟鍵盤,便會重新調整容器的大小,從而縮小內容。
解:
在頁面加載時,以像素為單位設置body
的高度,如下所示:
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.