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 name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

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

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

2 个答案: