logo标签列表

为什么window.innerWidth没有返回正确的值？

javascripthtmlwidthviewport
10
我正在尝试解决使用Javascript确定浏览器“窗口”宽度的问题。我知道在这种情况下，不同的人可能意味着不同的东西，所以具体来说，我指的是绿色区域，如此帖子所示。
我已经阅读了该帖子的前两个回复以及其他一些stackoverflow提供的解决方案，但都无法正常工作：我正在使用Firefox 27.0.1，在一个宽度为1920像素的监视器上最大化窗口。脚本显示我的视口宽度为1536像素。我预计应该是1920（或接近）。
根据我所看到的，对于我的情况，最简单的解决方案似乎是这段代码：
<html>
<head>
<script type="text/javascript">
function onAfterLoad() {
    document.write('<p>Your viewport width is '+window.innerWidth+'</p>');
}
</script>
</head>
<body onload="onAfterLoad();">
</body>
</html>

写这篇文章时，此代码位于此处。这也显示我的视口宽度为1536像素，但我认为应该是1920。

请问我做错了什么？

7个回答
8
1
这对我也起作用了。 - rkd
7
检查您的视口元标记。它应该是: <meta name="viewport" content="width=device-width,initial-scale=1" />
它对我有效，但这是什么？视口和初始缩放？ - Mohammad Hossein Ganjyar
1
视口指的是网站上对于特定用户设备可见的区域。 该标签将浏览器宽度设置为设备宽度。初始缩放防止浏览器最初以任何缩放级别显示网站。 - Cristiam Da Silva
我已经发表了一篇关于这个主题的文章： https://medium.com/@hossein.ganjyar/why-does-my-mobile-browser-seems-wrong-pixels-what-is-viewport-and-how-can-i-use-of-meta-tag-321890cbeef4 - Mohammad Hossein Ganjyar
5
我认为你应该尝试使用 jQuery尺寸函数，而不是处理JavaScript函数。
最基本的是： $(window).width()（获取浏览器宽度）
和 $(window).height()（获取浏览器高度）
希望这可以帮助到你。
我不知道如何使用jQuery语法来实现这个。我的明显猜测http://www.kilgore.org.uk/surfing/fixed5.html给我一个空白页面。 - user1476044
1
这个可以运行，但为什么 window.innerWidth 不起作用呢？ - Vincent
3
如果您将Microsoft Windows 7配置为显示25％更大的文本，则Firefox会将您的屏幕报告为实际大小的1 / 1.25倍。这正好是实际1920的1536。

（即使在画布中的矩形也会画得比实际尺寸大25％。曾经有过这样的情况，让人发疯。）

1

首先：
您确定这是您的视口宽度吗？ 您想获取浏览器窗口的宽度还是整个屏幕的宽度？ 如果您想获取整个屏幕的宽度，在JavaScript中是不可能的。
其次：
尝试使用以下代码获取浏览器窗口的宽度：

function GetWidth()
{
var width = document.body.clientWidth;
document.write('<p>Your viewport width is '+width+'</p>')
}
谢谢您的建议，但似乎没有任何区别 - 请参见http://www.kilgore.org.uk/surfing/fixed4.html - user1476044
我忘了补充，在回答你的问题时，是的，我想要获取浏览器窗口的宽度。 - user1476044
@user1476044 我之前读到过 innerWidth 在跨浏览器时存在一些问题。但正如我上面所说的，尝试一下。在那个网站上它起作用了！他们使用了 document.body.clientWidth。 - user3095977
顺便提一下，Viral Shah的示例是有效的，但你忘了引用jQuery库，像这样：<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 你必须添加这个才能让jQuery正常工作！ - user3095977
感谢您对fixed5.html的更正，但页面仍然是空白的。另外，我不明白你所说的TRY是什么意思。你认为我没有尝试过什么？ - user1476044
0

Windows 11机器的解决方案
进入“设置”>“显示”>“缩放和布局”，将其更改为100%，
然后您应该会看到屏幕分辨率作为您的代码输出，
注意：这不是推荐的方法，因为您将会遇到难以阅读的文本大小。
解释
一些系统（如Windows）会缩放应用程序视口，这是因为现在的屏幕具有更高的像素密度值，因此文本会变小。
为了更深入地理解，想象一下典型的14英寸宽度的笔记本电脑屏幕，其宽度为1920个像素。
如果您将字体设置为20px，则您的文本将具有以下大小：
文本大小（英寸）=像素大小（像素）*屏幕宽度（英寸）/屏幕像素。
因此，如果您进行计算，它将是：
文本大小（英寸）=20 * 14 / 1920 = .1458333... 英寸。
所以它真的很小，因此系统倾向于将这些屏幕缩放125％，也就是说，在您的情况下，您的屏幕宽度将为= 1920 / 125％= 1536 px。
建议
您应该使您的代码适用于任何屏幕分辨率。

-1
你的代码对我很有效。它显示1600（我的屏幕是1600 x 900）。 在调用代码时，你的浏览器是否最大化？ 也许你的分辨率是1536 x某个值，而你的屏幕被拉伸了？我建议你在屏幕设置中检查一下。另一种尝试的方法是打开Chrome和Devtools，然后调整浏览器大小。这将显示浏览器窗口的尺寸。
浏览器窗口已最大化，屏幕宽度为1920像素。我尝试了Chrome/Devtools，其显示我的窗口宽度为1740，加上8像素的边框总计为1756。更接近了，但还没完全准确。 - user1476044
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接