Question

以下代码未返回文档的正确大小。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="./scripts/jquery-1.7.2.js"></script>
        <script>
            alert($(document).width());
        </script>
    </head>
    <body style="width:100%">
        <div style="width:100%" id="myappClientContainer">DEFAULT HTML</div>
    </body>
</html>

当我将窗口内容的宽度设置为320时，警报显示为426。

例如，使用Internet Explorer 9.0.8112.16421时，相同的代码会正确报告。

这是Chrome的错误吗？还是用jQuery？还是其他什么？

我在尝试在文档中设置div以填充文档的整个大小时偶然发现了这一点，所以这可能不是获取整个文档尺寸的正确方法吗？

如何解决此问题？

更新1：

根据以下一些建议，我尝试了两个：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="./scripts/jquery-1.7.2.js"></script>
        <script>
            function sizeme() {
                alert($(document).width());
            }
        </script>
    </head>
    <body style="width:100%" onload="sizeme()">
        <div style="width:100%" id="myappClientContainer">DEFAULT HTML</div>
    </body>
</html>

和此：

<!DOCTYPE html>
<html>
    <head>
        <script>
            function sizeme() {
                alert($(document).width());
            }
        </script>
    </head>
    <body style="width:100%" onload="sizeme()">
        <div style="width:100%" id="myappClientContainer">DEFAULT HTML</div>

        <!-- YOUR jQuery SCRIPTS here before the '</body>' tag + load from Google (it's faster). -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
            (function($){ // remap '$' to jQuery
                 alert($(document).width());
            })(jQuery);
        </script>
    </body>
</html>

但我仍然在两者中都有错误的尺寸（在Chrome 18.0.1025.168 中）。

我正在使用jQuery 1.7.2。

Answer 1

在整个文档加载完成之前，您正在运行它。试试这个：

$(function(){
    alert($(document).width());
});

Answer 2

我在Windows 8上的Chrome版本33.0.1750.154 m上遇到了同样的问题

我的笔记本电脑显示器的水平分辨率为：1366像素

然而，Chrome返回的水平分辨率（宽度）高于笔记本电脑的硬件功能。

使用Jquery：

$( window ).width()返回1483 px

使用普通Javascript：

window.innerWidth返回1483 px

document.body.clientWidth返回1484 px

（这也不起作用）

<强>结论：由于普通javascript返回与jquery相同的错误值，这绝不是Jquery中的错误，而是Chrome中的错误。

修改在我的情况下，Chrome处于缩小状态。虽然我的测试标签显示100％放大率，但当我打开另一个标签时，内容显得很小，当选中（ctrl +，ctr - on windows）时，它被缩小了。将新选项卡重置为100％（ctrl 0 0n windows）后，问题消失了。

当我缩小时，Firefox的行为方式相同。

Answer 3

我建议你这样做：

<!DOCTYPE html>
<html>
<head>

<!-- OTHER JS LIBRARY/SCRIPTS -->
</head>     
<body style="width:100%">

<div style="width:100%" id="myappClientContainer">DEFAULT HTML</div>

<!-- YOUR jQuery SCRIPTS here before the '</body>' tag + load from google (it's faster) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    (function($){ // remap '$' to jQuery
         alert($(document).width());
    })(jQuery);
</script>

</body>
</html>

在Chrome中保存并打开。

Answer 4

我建议你这样做：

<!DOCTYPE html>
<html>
<head>

<!-- OTHER JS LIBRARY/SCRIPTS -->
</head>     
<body style="width:100%">

<div style="width:100%" id="myappClientContainer">DEFAULT HTML</div>

<!-- YOUR jQuery SCRIPTS here before the '</body>' tag + load from google (it's faster) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    (function($){ // remap '$' to jQuery
         alert($(document).width());
    })(jQuery);
</script>

</body>
</html>

在Chrome中保存并打开。

Answer 5

尝试document.body.clientWidth

它对我有用

jQuery在Chrome 18.0.1025.168中返回错误的宽度和高度

5 个答案: