Question

我正在创建一个网页，其中包含一个向下延伸到页面底部的Google地图。

然而，在某些移动浏览器中似乎存在此问题。如果在页面加载之前屏幕键盘存在，则地图不会向下延伸到屏幕底部，而只是到达屏幕键盘顶部的位置。

见下面的代码。要测试它，请加载页面，然后单击浏览器的地址栏并点击屏幕键盘上的“ENTER”。页面将刷新，但这次缩小了高度。

不影响所有浏览器 - 我的Samsung GTi5500（Android 2.2）上的android浏览器存在问题，但我的神行者平板电脑（android 4）上没有问题。

看起来像什么......

what it aught to look like

屏幕键盘向上......

on-screen keyboard

当页面重新加载时，你会得到这个......

what-you get - white space at bottom

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<style type="text/css">
    #map_canvas {
        position: absolute;
        top: 50px; left: 0px; right: 0px; bottom: 0;
    }
</style>

<script type="text/javascript">
var map;
$(document).ready(function(){
    map = new google.maps.Map(
        document.getElementById("map_canvas"), {
            zoom: 16,
            center: new google.maps.LatLng(56.312, -3.004)
        });
});
</script>
</head>
<body>
        <div id="map_canvas"></div>
</body>
</html>

更新

这些都报告了128px的高度 - 即确认浏览器认为页面高度很短（浏览器可见区域的高度为401px）。

       screen.height
       $(window).height
       document.height
       jQuery(document).height()
       $("html").height()
       $("body").height()

在移动浏览器中将网页扩展到页面底部（屏幕键盘问题）

0 个答案: