有没有一种方法可以防止由于url栏之类的ui元素而导致视口调整大小? [英] Is there a way to prevent viewport resizing due to ui elements like url bar?

问题描述

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

My problem is that I am making a responsive website and want the viewport to be always fullscreen eg on document ready I want the body to be 100% of the available device window INCLUDING the height for the url bar and other navigation elements like those on ios, and for it to stay that way. The resizing is breaking my percentage based design. I have included the following for the 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的样式均如下:

Both html and body are styled as follows:

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

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

使用jQuery，我认为我已经成功地在调整大小后以这种方式设置了屏幕尺寸

With jQuery I think I have succeeded in grabbing the screen size after a resize and setting it that way

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

但这仅在用户先向下滚动(向上将网址栏保持在适当位置)时有效

but this will only work if the user scrolls down first (up keeps the url bar in place)

我在表单输入和软键盘上遇到了相同的问题，并使用了它:

I was having the same issue with form inputs and the soft keyboard and used this:

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

我一直在寻找诸如minimum-ui(在ios8上不再使用)之类的解决方案，无论如何我都需要更多，滚动至0,1，最小高度，以及其他各种更复杂的解决方案，例如检查设备类型等，但是我似乎无法理解. 我对此很陌生，所以如果我遗漏了一些明显的东西，请客气！

I have looked around for solutions like the minimal-ui (gone on ios8) and I need more than that anyway, scroll to 0,1, min-height, and various other more complicated solutions like checking for device type etc but I can't seem to get it. I am fairly new to this so if I am missing something obvious, please be kind!

推荐答案

请参阅以下内容:

已删除iOS 8最小用户界面"视口属性，还有其他软全屏"属性吗?解决方案?

http://www.html5rocks.com/en/mobile/fullscreen/

这篇关于有没有一种方法可以防止由于url栏之类的ui元素而导致视口调整大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！