Question

我正在做一个响应式网站，我遇到了这个问题。一切顺利，直到我选择[输入类型=＆＃34;文字＆＃34;]并从键盘输出，整个网站调整大小，它就像屏幕尺寸只是键盘上方的部分。我只想要那个正常大小的mantain。我已经尝试了在stackoverflow上提出的所有解决方案，其他论坛也是如此，bun似乎没什么用。

有没有人知道如何解决这个问题？

<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被重新定义，而输入字段和按钮不是。无论如何，它们都是从容器中出来的，因为容器变小了，它们保持原来的大小。我不知道自己是否清楚自己。

问题是一样的，我如何在键盘出现时保持原始大小？

Answer 1

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

试试这段HTML。我将它用于我的每个页面，它总是做到它应该做的事情。也许你的工作因为缺少最小尺度属性而无法工作。

Answer 2

我的案例中没有<meta name='viewport'/>或百分比修复（Android 2.3浏览器），所以我最终得到了这个CSS：

body {
    min-height: 350px;
}

您还需要对height:auto。

的任何内容执行此操作

这是一个黑客，但它至少使网站可用于这种边缘情况。一旦用户尝试缩放，它就会从中跳出来。

Answer 3

好的我至少在一定程度上让它成功了。对我来说问题是我将HTML和BODY高度设为100％，所以当键盘出现时，高度就成了它上面的部分。如果我没有宣布任何高度，它就可以正常工作。

html, body{
  height: 100%;
}

我之所以说，部分因为我需要设备的高度，所以我可以与页面内的元素进行比例。如果我没有声明高度，页面的内容将在一些智能手机中显示为半屏，而在其他核心。我已经通过媒体查询取得了突破点，但我不能为每个分辨率制作一个。我创建了一些范围（例如：max-width：320 ---- min-width：321，max-width：480 ....等等）。

关于如何解决身高问题的任何想法？

Answer 4

这对我有用：

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

使用jQuery：

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

Answer 5

在使用视口单位来划分高度（div）时，我遇到了同样的问题。.我使用像素定义了划分的高度..现在可以解决了。.

Answer 6

与Shardul一样，我的问题是以VH单位而不是px固定了高度。我忘记了它，就像我几个月前所做的那样...

我终于用最小高度100vh来固定页脚高度。

我刚刚添加了一个媒体查询，当像素小于500px时，它将覆盖此规则：

#root {
mix-height : 800px;
}

移动键盘调整视口大小

6 个答案: