jquery - 有没有办法防止视口(viewport)因 url 栏等 ui 元素而调整大小？

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

<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);
});

我四处寻找像 minimal-ui(在 ios8 上消失)这样的解决方案，无论如何我需要更多，滚动到 0,1，最小高度，以及各种其他更复杂的解决方案，比如检查设备类型等，但是我似乎无法得到它。我对此很陌生，所以如果我遗漏了一些明显的东西，请多多包涵!

最佳答案

请参阅以下内容:

关于jquery - 有没有办法防止视口(viewport)因 url 栏等 ui 元素而调整大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26932936/