[英]background image resize/disappear when soft keyboard comes up in iphone/ipad (using phonegap)
i am facing a problem when running phonegap code for iphone, which is, when the soft keyboard(default) of iphone/ipad device comes up the background image is disappear or resize thats you can see in the images below. 我在为iphone运行phonegap代码时遇到问题,也就是说,当iphone / ipad设备的软键盘(默认)出现时,背景图像消失或调整大小,您可以在下面的图像中看到。 Please suggest if you have any idea to solve this problem.
如果您有任何想法可以解决这个问题请建议。
Here is few codes: 这里有几个代码:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="user-scalable=0, initial-scale=1, minimum- scale=1, width=device-width, height=device-height" />
body: 身体:
<body>
<div id="login-back" >
<section class="log-email">
<a class="back-icon" href="index.html"><img src="img/back-icon.png" alt=""></a>
<h3>Login</h3>
<div class="log-email-container">
<ul class="contact_form">
<li class="clearfix">
<input type="text" name="" id="email" placeholder="E-mailadres">
</li>
<li class="clearfix">
<input type="password" name="" id="pwd" placeholder="wachtwoord">
</li>
<li class="clearfix">
<input type="submit" value="Inloggen" id="llogin" style="font-size: 14px; " onclick="login();" name="">
</li>
<li>
<a href="reset-pass.html" id="linkfp" style="font-size: 16px;"><u>Wachtwoord vergeten?</u></a>
</li>
<li id="test">
</li>
</ul>
</div>
</section>
</div>
</div>
</body>
css: CSS:
#login-back
{
background:url(../img/bg.jpg)no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
height: 100%;
}
i am also facing this issue. 我也面临这个问题。 i got solution after long time search.
经过长时间的搜索后,我得到了解决 in your html page add meta tag by following
在您的html页面中按以下方式添加元标记
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="mobile portfolio, mobile portfolio site">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Add in your header tag 添加标题标记
HI try this one i tested with ios simulator 7.1 我尝试用ios模拟器7.1测试的这个
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet"
type="text/css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
.bgforback {
background-image: url(img/sc_bg.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
position: fixed !important;
}
.cen {
position: absolute;
margin: 50% 20%;
width:60%;
}
p{
color:red;
text-shadow:none;
}
</style>
</head>
<body>
<div data-role="page" class="bgforback">
<div class="cen">
<p>LOGIN</p>
<input type="text" placeholder="Email address">
<input type="password" placeholder="password">
<input type="button" value="LOGIN">
</div>
</div>
</body>
</html>
try 尝试
A little late, but I hope someone get this answer useful. 有点晚了,但我希望有人能得到这个答案。 Try this css directive:
试试这个css指令:
background-attachment:fixed;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.