如何在javascript中检测屏幕分辨率答案

【问题标题】：how to detect screen resolution in javascript如何在javascript中检测屏幕分辨率
【发布时间】：2012-05-17 10:11:13
【问题描述】：

我想让 javascript 自己检测屏幕分辨率，因为我可能有不同的 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>>

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

【问题讨论】：

How to detect the screen resolution with JavaScript? 的可能重复项
@zerkms 我认为这不是重复的。屏幕分辨率不是 OP 为此目的所需要的。

标签： javascript html layout

【解决方案1】：

您的代码似乎有一些问题：

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

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

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

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

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

【讨论】：

尽管这不能回答问题，但我还是忍不住点赞。重要建议。
好的 .. 谢谢你的建议 .. 下次我会注意到的 .. 也谢谢你的建议 :)
没问题，希望有所帮助:)

【解决方案2】：

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

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

jsFiddle Demo

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

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

【讨论】：

【解决方案3】：

你可以试试这个

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

谢谢。

【讨论】：

是的，您认为在这里使用它是个好主意吗？让我帮忙：不，因为浏览器的可用区域与屏幕的可用区域不一样，OP需要第一个。 Check demo.
@Eric 这是 Javascript，但这不是您需要的。如果你想用 Javascript 解决你的问题，你需要视口的大小。看到这个问题：stackoverflow.com/questions/1248081/…

【解决方案4】：

仅当您不太担心旧版本的 IE 时，CSS3 的“大小”和“覆盖”属性也有助于解决这种情况。并且无需使用任何 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%;
}

【讨论】：

+1 未来的好解决方案。我很高兴你喜欢背景图片:)。我在 Google 图片中搜索“背景”时的第一个结果。

【解决方案5】：

尝试：

window.screen.availHeight
window.screen.availWidth

【讨论】：

请看我在@Tuhin 的回答下的评论，是一样的。