获取页面分辨率 jQuery - JavaScript

在前端开发中，有时候需要知道用户浏览页面的屏幕分辨率，以便于针对不同的设备优化页面展示。本文将介绍如何使用 jQuery 和原生 JavaScript 来获取用户屏幕的分辨率。

方法一：使用 jQuery 的方法

通过 jQuery 的 $(window).width() 和 $(window).height() 方法，可以获取用户屏幕的宽度和高度。代码如下：

// 获取屏幕宽度
var screenWidth = $(window).width();

// 获取屏幕高度
var screenHeight = $(window).height();

// 输出屏幕分辨率
console.log("屏幕分辨率为：" + screenWidth + " x " + screenHeight);

方法二：使用原生 JavaScript 的方法

通过原生 JavaScript 获取屏幕分辨率，需要使用 window.screen 对象，具体代码如下：

// 获取屏幕宽度
var screenWidth = window.screen.width;

// 获取屏幕高度
var screenHeight = window.screen.height;

// 输出屏幕分辨率
console.log("屏幕分辨率为：" + screenWidth + " x " + screenHeight);

方法三：兼容移动端设备

对于移动端设备，需要考虑设备的像素密度（DPI）对分辨率的影响。在这种情况下，可以先获取设备像素比（DPR），然后将设备分辨率乘以这个值得到实际分辨率。具体代码如下：

// 获取设备像素比
var devicePixelRatio = window.devicePixelRatio || 1;

// 获取屏幕宽度
var screenWidth = window.screen.width * devicePixelRatio;

// 获取屏幕高度
var screenHeight = window.screen.height * devicePixelRatio;

// 输出屏幕分辨率
console.log("屏幕分辨率为：" + screenWidth + " x " + screenHeight);

以上就是在 jQuery 和 JavaScript 中获取用户屏幕分辨率的方法。通过这些方法，可以为不同设备优化网站的展示效果，提高用户体验。