Javascript 在移动浏览器中让网页向下延伸到页面底部（屏幕键盘问题）
我正在创建一个网页，其中包含一个向下延伸到页面底部的谷歌地图 然而，在一些移动浏览器中，这似乎有一个问题。如果在页面加载之前屏幕上有键盘，则地图不会向下延伸到屏幕底部，而只会延伸到屏幕上键盘的顶部 请参阅下面的代码。 要测试它，请加载页面，然后单击浏览器的地址栏并在屏幕键盘上单击“回车”。页面将刷新，但这次高度缩小 不会影响所有浏览器-问题存在于我的三星GTi5500（安卓2.2）上的安卓浏览器上，但不存在于我的路虎神行者平板电脑（安卓4）上 看起来像什么 屏幕上的键盘向上 当页面重新加载时，您会看到以下内容Javascript 在移动浏览器中让网页向下延伸到页面底部（屏幕键盘问题）,javascript,css,mobile,Javascript,Css,Mobile,我正在创建一个网页，其中包含一个向下延伸到页面底部的谷歌地图 然而，在一些移动浏览器中，这似乎有一个问题。如果在页面加载之前屏幕上有键盘，则地图不会向下延伸到屏幕底部，而只会延伸到屏幕上键盘的顶部 请参阅下面的代码。 要测试它，请加载页面，然后单击浏览器的地址栏并在屏幕键盘上单击“回车”。页面将刷新，但这次高度缩小 不会影响所有浏览器-问题存在于我的三星GTi5500（安卓2.2）上的安卓浏览器上，但不存在于我的路虎神行者平板电脑（安卓4）上 看起来像什么 屏幕上的键盘向上 当页面重新加载时
<!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>
我不知道答案，但我有建议给你们。请在您的问题中添加适当的标签。看起来你对谷歌地图、AndroidApp等都有疑问。@Nizam Kazi这不是谷歌地图的问题。它发生在任何绝对定位或固定定位（可能更多，我不知道）。（我觉得问题够长了，没有添加更多细节）。我提到谷歌地图，以防有人提出解决方案，而这不适合谷歌地图。你为什么说AndroidApps？它不是android应用程序，而是一个网页。这只是@NizamKazi从最佳实践中得到的一个有用建议。顺便说一句，我正在深入研究您的问题。问题：为什么要设置视口的最大比例？建议：在
初始缩放后关闭所有缩放。谢谢@mike。你是说我为什么要删除所有用户控制的可伸缩性？这是因为使用谷歌地图，你已经有了内置的缩放功能，你需要停止浏览器和gogole地图之间的缩放竞争。此外，我在顶部有一个菜单栏（在上面的简化示例中删除），带有固定的位置，只有当你调整了缩放比例时，它才适用于android 2.2。
screen.height
$(window).height
document.height
jQuery(document).height()
$("html").height()
$("body").height()