好的,我以为这很简单,但结果并不是这样。我想我只是在我的HTML/CSS中弄错了什么,但是还是试一下。
我有一个基本页面,如下所示:
HTML
<!DOCTYPE html>
<html>
<head>
<link href='test2.css' rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="test2.js"></script>
</head>
<body>
<div id="scroll"></div>
</body>
</html>
test2.css
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
#scroll {
height: 100%;
width: 100%;
overflow: scroll;
background-color: black;
}
test2.js
$(document).ready(function() {
// my resolution is 1440x900
alert('innerwidth should be 1425');
// all of these return 1440
alert('body innerwidth: ' + $('body').innerWidth());
alert('document width: ' + $(document).width());
alert('window width: ' + $(window).width());
alert('scroll div innerwidth: ' + $('#scroll').innerWidth());
alert('document.documentElement.clientWidth: ' + document.documentElement.clientWidth);
alert('document.documentElement.scrollWidth: ' + document.documentElement.scrollWidth);
});
所以我在页面上只有一个元素……一个 div 占据整个屏幕,或者更确切地说,它应该占据整个屏幕,减去滚动条。现在,我一直在研究如何获取没有滚动条的页面宽度和高度,但不幸的是,它们都没有返回正确的值……这让我相信我在 HTML 或 CSS 上做错了什么。
我看了以下内容: jquery - how to get screen width without scrollbar? how to get the browser window size without the scroll bars 所以我需要一种方法来返回我的可视屏幕值,减去各自的滚动条值……所以对于我的宽度,我的值应该是 1425,因为滚动条的宽度为 15 像素。我认为这就是 innerWidth 的工作,但显然我错了?
有人能提供任何见解吗?(我正在运行 Firefox 24。)
编辑
为了提供一些背景,我有一个空白页面。我将逐个添加元素到此页面,并在计算这些元素的大小时需要使用页面的宽度。最终,此页面将不断增长,直到出现滚动条,这就是为什么我试图从一开始就强制出现滚动条,但显然这仍然没有任何作用。
编辑2
更有趣的是...如果我执行document.getElementById('scroll').clientWidth,我会得到正确的innerWidth,但如果我执行$('#scroll').width()或$('#scroll').innerWidth(),它们都返回最大分辨率...听起来像是jQuery的一个bug。