如何将元素定位在移动设备的 100% 高度内

Question

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

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

是否可以在不受触摸键盘干扰的情况下根据设备高度对元素进行定位和标注？

问题在这里显示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();

然后，在准备好文档时，使用 WantHeight 和 WantWidth 作为包装器大小的值，例如：

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

Answer 2

通常我希望页面不具有 800 到 900 像素的页面宽度，因为 Android 和 iPhone 浏览器默认设置为。要使页面宽度与设备宽度相同，您可以尝试以下元标记：

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

顺便说一句，您可以通过Mobile website design for android,iphone 做一些笔记。