有没有办法防止由于 url bar 等 ui 元素而调整视口大小？答案

【问题标题】：Is there a way to prevent viewport resizing due to ui elements like url bar?有没有办法防止由于 url bar 等 ui 元素而调整视口大小？
【发布时间】：2015-01-12 00:26:21
【问题描述】：

我的问题是我正在制作一个响应式网站并希望视口始终全屏，例如在准备好文档时我希望正文是可用设备窗口的 100%，包括 url 栏的高度和其他导航元素，如那些在 ios 上的，并让它保持这种状态。调整大小打破了我基于百分比的设计。我为视口添加了以下内容：

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

html 和 body 的样式如下：

html {
  height: 100%;
  width:100%;
  margin: 0 auto;
  padding:0;
}

body {
    width:100%;
    height:100%;
    margin: 0 auto;
    padding: 0;
}

使用 jQuery，我想我已经成功地在调整大小并设置它之后抓取屏幕大小

$(window).resize(function() {
    var height = $("body").css("height");
    $("body").css("height", height);
});

但这只有在用户先向下滚动时才有效（向上保持 url 栏就位）

我在表单输入和软键盘上遇到了同样的问题并使用了这个：

$("#name").focus(function() {
    var height = $("body").css("height");
    $("body").css("height", height);
});

我已经四处寻找诸如最小 ui（在 ios8 上已使用）之类的解决方案，但无论如何我需要更多，滚动到 0,1、最小高度以及各种其他更复杂的解决方案，例如检查设备类型等，但是我似乎无法得到它。我对此很陌生，所以如果我遗漏了一些明显的东西，请善待！

【问题讨论】：

标签： jquery css responsive-design height viewport