如何在移動設備的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採取一些筆記。