3

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

<!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。

4

5 回答 5

2

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

我的笔记本电脑显示器具有水平分辨率：1366 px

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

使用jQuery：

$( window ).width()返回 1483 像素

使用纯 Javascript：

window.innerWidth 返回 1483 像素

document.body.clientWidth返回 1484 像素

（这也行不通）

结论： 由于纯 javascript 返回与 jquery 相同的错误值，因此这一定不是 Jquery 中的错误，而是 Chrome 中的错误。

在我的情况下， Edit Chrome处于缩小状态。尽管我的测试选项卡上显示了100％放大倍率，当我打开另一个选项卡时，内容显示为小（CTRL +，ctr-在Windows上）时，它已被缩放。将新标签重置为 100%（ctrl 0 0n windows）后，问题消失了。

Firefox 在缩小时的行为与我相同。

于 2014-03-15T17:17:29.060 回答
2

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

$(function(){
    alert($(document).width());
});
于 2012-05-05T20:57:32.603 回答
0

我建议你这样做：

<!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 中打开。

于 2012-05-05T21:31:29.213 回答
0

“Div”元素本身填充了所有可用的水平空间，因此无需定义它的宽度。也$(document).width();只是获取文档宽度的正确方法。

于 2012-05-05T20:57:24.390 回答
0

尝试document.body.clientWidth

这个对我有用

于 2014-01-07T08:47:13.657 回答