我有非常简单的标记，只有几个输入字段：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link href="css/style.css" media="(max-width: 60em)" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="signup-home-div">
<a href="home">Home</a>
</div>
<div id="signup-form-div">
<form id="signup-form" action="#">
<div id="signup-name-div">
<div id="signup-name-label">Name</div>
<input type="text" id="signup-name" name="name"/>
</div>
<div id="signup-email-div">
<div id="signup-email-label">Email</div>
<input type="text" id="signup-email" name="email"/>
</div>
<div id="signup-captcha-div">
<div id="signup-captcha-label">
Enter the text in the image.
</div>
<img id="signup-captcha-img" alt="" src=""/>
<input type="text" id="signup-captcha" name="captcha"/>
</div>
<div id="signup-div">
<button class='btn' id="signup" type="button">Sign Up!</button>
<div id="signup-status"></div>
</div>
</form>
</div>
<div id="signup-response-div">
</div>
</body>
</html>
和相应的CSS：
html, body, ul, ol {
margin : 0;
padding : 0;
border : 0;
}
body {
width : 100%;
box-sizing: border-box;
}
body {
background : #06509b;
font-family : "Open Sans", sans-serif;
}
.btn, .img-btn, .link {
background-color : #06509b;
color : #f6f6f6;
border : 1px solid #3a82cd;
height : 2em;
line-height : 2;
}
.img-btn {
background-color : #f6f6f6;
color : #06509b;
}
.link {
text-decoration : none;
padding : 0.5em;
}
.btn:hover, .img-btn:hover, .link:hover, .btn:focus, .img-btn:focus, .link:focus {
background-color : #3a82cd;
}
#signup-home-div {
margin-top : 10%;
margin-left : 70%;
}
#signup-home-div a {
color : #ef8f00;
font-size : large;
text-decoration : none;
}
#signup-form-div {
width : 70%;
margin-top : 5%;
margin-left : 15%;
border : 1px solid #cccccc;
padding : 0.5em;
padding-bottom : 0.25em;
color : #f6f6f6;
font-family : "Open Sans", sans-serif;
font-size : 100%;
}
form {
width : 100%;
}
#signup-name-div, #signup-email-div, #signup-pubname-div, #signup-div, #signup-captcha-div {
width : 90%;
margin-left : 5%;
margin-bottom : 1em;
}
#signup-name, #signup-email, #signup-pubname, #signup-captcha {
border : 1px solid #cccccc;
width : 100%;
height : 2em;
color : #666666;
}
#signup-status {
width : 100%;
height : 1em;
margin-top : 0.5em;
text-align : center;
font-style : italic;
display : none;
}
#signup {
width : 40%;
margin-top : 0.5em;
margin-left : 30%;
}
#signup-response-div {
width : 70%;
margin-top : 10%;
margin-left : 15%;
border : 1px solid #cccccc;
padding : 1em;
text-align : center;
white-space : normal;
display : none;
color : #f6f6f6;
}
#signup-captcha-img {
width : 100%;
}
#signup-name-label, #signup-email-label, #signup-pubname-label, #signup-captcha-label {
margin-bottom : 0.5em;
}
我在Chrome上测试了MotoG（4.4.4）。最初页面的外观和行为与预期一致。具体来说，我无法水平滚动。然而，当我点击任何输入字段时，弹出软键盘，此时整个布局似乎跳了起来。我尝试输入几个字母并关闭键盘。现在不知何故，页面获得了水平滚动的功能。关闭键盘后立即出现一个丑陋的故障，布局似乎重新绘制。在点击输入字段几次后，页面似乎冻结了。很烦人！我一直在努力思考，但无法弄清楚发生了什么。如果您想快速试用您的手机，该页面也可在以下位置找到：http://bugtest.everydayapps.in。
编辑： 我很好，整个页面向上滚动，无论如何都无法避免AFAIK，但页面跳跃是不可接受的。
答案 0 :(得分：0)
尝试在身体内的所有内容周围放置一个包装器
<body>
<div id="wrapper">
all your content here
</div>
</body>
#wrapper
{
position:absolute;
top:0;
left:0;
right:0;
display:block;
width:100%;
overflow:hidden;
}