移动端键盘调整视口大小

Question

移动端键盘调整视口大小

22

我正在做一个响应式网站，但我遇到了这个问题：一切正常，直到我选择一个[input type="text"]并打开键盘后，整个网站都会被调整大小，就好像屏幕大小只有键盘上面的部分。我希望保持正常尺寸。我已经尝试了stackoverflow和其他论坛提出的所有解决方案，但似乎没有任何作用。

有人有什么解决办法吗？

<head>
  <title>SchoolIn</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

//other code

更新： 我将尝试更好地解释。

我有一个头部区域。

//other code
<div class="head">
  //Here is some text 
</div>
//other code

接下来是内容部分

//other code
<div class="container">
  <div class="content">
    //other code
    <input type="text" ...... />
    <input type="password" ..... />
    <input type="submit" ..... />
  </div>
</div>
//other code

所有元素都是以百分比而非像素为单位。

当键盘弹出时，标题、容器和内容div会被重新定义大小，而输入字段和按钮则不会。无论如何，它们都会从其容器中弹出，因为容器变小了而它们保持原始大小。我不知道我是否表达清楚。

问题相同，如何使它在键盘弹出时保持原始大小？

- Daniel Srp

3

你是如何解决这个问题的？（我认为我尝试了所有可能的组合，包括你的，但都没有成功。:( - Daniel Srp） - user2360915

1

@Daniel Srp 你最终找到问题的原因了吗？我也遇到了完全相同的问题，但是找不到任何线索。 - Doug

6个回答

3

在我的情况下（Android 2.3浏览器），没有任何或百分比的修复方法有效，因此我最终使用了以下CSS：

body {
    min-height: 350px;
}

你还需要为任何使用height:auto的元素进行此操作。这是一种hack方法，但至少可以使网站在这种极端情况下可用。一旦用户尝试缩放，它就会自动退出。

- Dunc

1

好的，我已经让它工作了，至少部分地。对我来说问题在于我将HTML和BODY的高度设为了100％，所以当键盘弹出时，高度就变成了它上面的部分。如果我不声明任何高度，它就可以正常工作。

html, body{
  height: 100%;
}

我之所以需要设备的高度，是因为我需要与页面内的元素相比较。如果我不声明高度，页面内容将在某些智能手机上显示为半屏幕大小，在其他手机上则正常显示。我已经使用媒体查询设置了断点，但我不能为每个分辨率都设置一个断点。我创建了一些范围（例如：max-width:320 ---- min-width:321，max-width:480 ....等等）。

你有什么解决高度问题的想法吗？

- Daniel Srp

你找到解决方案了吗？ - Alex I

0

当我使用视口单位来定义一个 division (div) 的高度时，我遇到了同样的问题.. 我改用像素来定义 division 的高度.. 现在问题已经解决了..

- Shardul Birje

0

与Shardul一样，我的问题是高度使用了VH单位而非px。我忘记了，因为几个月前就设置好了...

最终，我使用了min-height 100vh来修复页脚高度。

当屏幕宽度小于500像素时，我添加了一个媒体查询以覆盖此规则：

#root {
mix-height : 800px;
}

- Yoann Buzenet

mix-height should be min-height - Roko C. Buljan

0

这对我有用：

当虚拟键盘被调用（Android），任何基于视口/百分比的元素的大小都会改变。一种解决方法是获取当前内部窗口高度的大小（以像素为单位），然后将其用作您希望在键盘弹出时保持不变的元素的高度。

使用jQuery：

$(document).ready(function() {
    /* ... */
    var windowHeight = $(window).innerHeight();
    $('body').css({'height':windowHeight});
    /* ... */
});

- danieln

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LikeAJohny · Accepted Answer

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

尝试使用这段HTML代码。我在我的每个页面上都使用它，并且它总是能够正常工作。也许你的问题是因为缺少minimum-scale属性。