我正在尝试phonegap,以便使用HTML5和Java Script为手机开发一些多平台应用。
我想要一个对象,我有在我的网页(它的表或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比屏幕高度还大?
谢谢。
好的,这在你的代码中没有错。你应该确切地知道window.screen.availWidth:是全高度设备+状态栏(对几个文档不正确,但这是事实)。您的屏幕可用的正是使用:
var width = window.innerWidth + "px";
var height = window.innerHeight + "px";