如何在 JavaScript 中检测屏幕分辨率

how to detect screen resolution in javascript

本文关键字：检测 屏幕 分辨率 JavaScript      更新时间：2023-09-26

我想让JavaScript检测屏幕分辨率本身，因为我可能有不同的LCD，并且每个LCD的大小都不同。 这是我的临时代码。 

<html>
<head>
<title>ViewImage</title>
<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
//   -->
</script>
</head>
<body onload="JavaScript:timedRefresh(1);">
<img src = "screenshot.jpeg" width="1014" height="751">
</body>
</html>

我尝试将JavaScript放入代码中 

<img src = "screenshot.jpeg" <script type="text/JavaScript">"width ="screen.width </script>>

但它失败了。 当我打开它时，我希望它能得到解决方案本身 任何人都可以帮助我解决这个问题吗？ 提前谢谢

您的代码似乎存在一些问题：

您可以从onLoad事件中删除JavaScript:，这在超链接中使用

<a href="javascript: doSomething()" />Link</a>

此外，您正在尝试每 1 毫秒刷新一次页面（如果您尝试每秒刷新一次，则应将其更改为 1000）。

你的函数最好这样写，这样你就可以避免使用eval：

function timedRefresh(timeoutPeriod) {
    setTimeout(function() { 
        location.reload(true); 
    }, timeoutPeriod);
}

在您的情况下，这就足够了：

<img src = "screenshot.jpeg" width ="100%" />

jsFiddle 演示

当然，这只会在body与视口大小相同时执行您想要的操作。这基本上告诉浏览器img应该与其父级一样大（在本例中为 body ）。

注意：Javascript 没有按照你期望的方式工作。 <script>是一个HTML元素，可让您将脚本（主要是Javascript）嵌入到文档中。您不能在客户端使用 Javascript 更改 HTML 源代码（就像在服务器端使用 PHP、Python 等一样）。不过，您可以修改 DOM。

你可以

试试这个

window.screen.availHeight for getting height
window.screen.availWidth  for getting width

谢谢。

CSS3 "size" 和 "cover" 属性在这种情况下也有帮助，前提是您不太担心旧版本的 IE。并且不需要使用任何JavaScript

演示 - http://jsfiddle.net/fHwu8/

body{
    background: #000 url(http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg) left top fixed no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%; /*cover*/
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
}

请尝试：

window.screen.availHeight
window.screen.availWidth
相关文章：