Question

为了开发一些HTML5和Java Script手机的多平台应用程序，我正在使用phonegap。

我想要一个我在我的网页（它的桌子或div）中的对象来缩小到显示的大小，因为每个手机可能有不同的显示，因此我使用java脚本和html如下来获取大小屏幕（当然可用的大小）并将其设置为我的div的高度和宽度，或者我想要的任何对象。

它一直工作到宽度但是当它达到高度时我仍然有一个滚动条。我不知道它来自哪里，但我尝试了很多方法来限制高度，甚至给父母div一个确切的大小。

<style>
.dummy {
    width:100px;
    height:100px;
    background-color:#900;
}
</style>
<script>
var width = window.screen.availWidth + "px";
var height = window.screen.availHeight + "px";
function load() {
document.getElementById("dummy").style.height = height;
document.getElementById("dummy").style.width = width;
}
</script>
<style>
body {

    margin:0px;

    }
.cont {
    height:100px;}  

</style>
</head>



<body onload="load()">
<div class="cont">
<div class="dummy" id="dummy" onclick="load();"></div>
</div>
</body>
</html>

这段代码有什么问题？为什么我的红色div大于屏幕高度？

感谢。

Answer 1

好的，你的代码没错。你应该确切知道window.screen.availWidth：是全高设备+状态栏（不正确的几个文件，但这是事实）。您正确使用的屏幕是使用：

var width = window.innerWidth + "px";
var height = window.innerHeight + "px";

通过调整对象大小来避免高度溢出

1 个答案: