如何使用 JavaScript 检测屏幕分辨率
答案:使用window.screen
对象
您可以简单地使用 window.screen
对象的 width
和 height
属性来获取屏幕的分辨率(即屏幕的宽度和高度)。
以下示例将在单击按钮时显示您的屏幕分辨率。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>使用 JavaScript 获取屏幕分辨率</title>
</head>
<body>
<script>
function getResolution() {
alert("你的屏幕分辨率是: " + screen.width + "x" + screen.height);
}
</script>
<button type="button" onclick="getResolution();">Get Resolution</button>
</body>
</html>
要检测移动设备显示器(例如 Retina 显示器)的原始分辨率,您必须将屏幕宽度和高度与设备像素比相乘,例如 window.screen.width * window.devicePixelRatio
和 window.screen.height * window.devicePixelRatio
。
设备像素比告诉浏览器应该使用多少设备屏幕实际像素来绘制单个 CSS 像素。 您还可以使用以下示例查找桌面的屏幕分辨率。 台式机屏幕的设备像素比一般为 1:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>使用 JavaScript 获取移动设备的屏幕分辨率</title>
</head>
<body>
<script>
function getResolution() {
alert("你的屏幕分辨率是: " + window.screen.width * window.devicePixelRatio + "x" + window.screen.height * window.devicePixelRatio);
}
</script>
<button type="button" onclick="getResolution();">Get Resolution</button>
</body>
</html>
请参阅 JavaScript 窗口屏幕
上的教程,了解屏幕对象的其他属性。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答: