html - 如何在移动设备的 100% 高度范围内定位元素

Question

对于混合应用程序，我需要构建应用程序的 Web 部分。

我定义了 html 和 body 是 100% 的视口(viewport)。 我认为这是个好主意，但事实证明，Android 会在显示触摸键盘时更改视口(viewport)。因此它会调整页面上所有元素的大小。这不是我想要的行为。

是否可以根据设备高度在元素上定位和指定尺寸，而不受触摸键盘的干扰？

问题显示在这里http://betapreview.nl/playground/overflow-table/index2.html

我已经尝试过

选项 1

<meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=no">

示例:http://betapreview.nl/playground/overflow-table/index2.html

选项 2

var theHeight = $(document).height();
$("#wrapper").css("height", theHeight);

示例:http://betapreview.nl/playground/overflow-table/index3.html

Answer 1

您可以使用 jQuery 来完成此操作。只需在文档准备好时添加以下内容:

var wantedHeight = $(window).height();
var wantedWidth = $(window).width();

然后，同样在文档就绪中，使用 wantedHeight 和 wantedWidth 作为包装尺寸的值，例如:

$('#wrapper').css('height', wantedHeight);
$('#wrapper').css('width', wantedWidth);