Question

我在为iphone运行phonegap代码时遇到问题，也就是说，当iphone / ipad设备的软键盘（默认）出现时，背景图像消失或调整大小，您可以在下面的图像中看到。如果您有任何想法可以解决这个问题，请建议。

enter image description here

以下是几个代码：

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

 #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%;
  }

Answer 1

我也面临这个问题。经过长时间的搜索后，我得到了解决在您的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>

添加标题标记

Answer 2

我尝试用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>

尝试

Answer 3

有点晚了，但是我希望有人得到这个答案有用。尝试以下CSS指令：

background-attachment:fixed;

当iphone / ipad中出现软键盘时，背景图像调整大小/消失（使用phonegap）

3 个答案: