如何在移动设备的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(); 

随后，同样在文件准备好，使用wantedHeight和wantedWidth为您的包装尺寸的数值，如：

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

Answer 2

通常我想网页不会有800到900像素的页面宽度，Android和iPhone浏览器默认将其设置为。要在页面宽度一样的设备宽度，您可以尝试以下meta标签：

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

顺便说一句，你可能会经历Mobile website design for android,iphone采取一些笔记。