如何使用 JavaScript 检测用户设备的屏幕分辨率？

在 JavaScript 中检测屏幕分辨率

在 Web 开发中，通常需要确定用户设备的分辨率。 JavaScript 为大多数现代浏览器提供了一种检索此信息的便捷方法。

浏览器兼容性

所有主要浏览器都支持 window.screen 对象，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera

访问屏幕分辨率

要获取屏幕分辨率，请使用 window.screen 对象的以下属性：

• availHeight：屏幕的可用高度（以像素为单位），不包括工具栏，
• availWidth：屏幕的可用宽度（以像素为单位），不包括工具栏、菜单等。
• height：屏幕的绝对高度（以像素为单位），包括工具栏、菜单、等
• 宽度：屏幕的绝对宽度（以像素为单位），包括工具栏、菜单等

移动设备的本机分辨率

要确定移动设备的原始分辨率，请将可用宽度和高度乘以设备像素比：

<code class="javascript">nativeWidth = window.screen.availWidth * window.devicePixelRatio;
nativeHeight = window.screen.availHeight * window.devicePixelRatio;</code>

获取绝对分辨率

如果您需要屏幕的绝对分辨率（包括工具栏和菜单），请使用 height 和 width 属性，而不是vailHeight和availWidth。

示例

以下代码检索可用屏幕分辨率：

<code class="javascript">let availHeight = window.screen.availHeight;
let availWidth = window.screen.availWidth;
console.log("Available screen resolution: " + availWidth + "x" + availHeight);</code>

以上是如何使用 JavaScript 检测用户设备的屏幕分辨率？的详细内容。更多信息请关注PHP中文网其他相关文章！