js怎么获取屏幕分辨率 js获取屏幕分辨率的5个关键属性
最新回答
诸多诱惑
2021-07-17 17:48:19
在JavaScript中，获取屏幕分辨率主要依赖window.screen对象提供的属性，结合设备像素比处理高清屏幕适配。以下是5个关键属性及其用法：
window.screen.width返回屏幕的物理宽度（单位：像素），包含任务栏等系统界面占用的空间。例如：
console.log("屏幕宽度：" + window.screen.width); // 输出如1920window.screen.height返回屏幕的物理高度（单位：像素），同样包含系统界面占用。例如：
console.log("屏幕高度：" + window.screen.height); // 输出如1080window.screen.availWidth返回屏幕可用宽度（单位：像素），不包含任务栏或Dock等系统界面。全屏应用开发时需优先使用此属性：
console.log("可用宽度：" + window.screen.availWidth); // 输出如1920（若任务栏隐藏）或1840（若任务栏占用80像素）window.screen.availHeight返回屏幕可用高度（单位：像素），不包含系统界面。与availWidth配合使用：
console.log("可用高度：" + window.screen.availHeight); // 输出如1040（若任务栏占用40像素）window.devicePixelRatio返回设备像素比，用于处理高清屏幕缩放。值为物理像素与CSS像素的比例：
console.log("设备像素比：" + window.devicePixelRatio); // 输出如1（普通屏）、2（Retina屏）应用场景：
高清图片适配：通过srcset属性加载不同分辨率图片。
Canvas绘制：需乘以devicePixelRatio保证清晰度。
文本渲染：避免在高DPI屏幕上出现模糊。
window.innerWidth与window.screen.width的区别
innerWidth：浏览器窗口内部宽度（含滚动条，受浏览器缩放影响）。
screen.width：屏幕物理宽度（始终为设备最大宽度）。示例：非全屏模式下，innerWidth可能小于screen.width。
自适应布局实现结合CSS Media Queries动态调整样式：
/* 小屏幕默认样式 */body { font-size: 14px; }/* 中屏幕（≥768px） */@media (min-width: 768px) { body { font-size: 16px; }}/* 大屏幕（≥1200px） */@media (min-width: 1200px) { body { font-size: 18px; }}移动端高清适配通过devicePixelRatio加载适配图片：
<img src="image.jpg" srcset="image@2x.jpg 2x, image@3x.jpg 3x" alt="响应式图片">
- 隐私限制：部分浏览器可能限制非激活标签页的屏幕信息获取。
- 多显示器环境：screen对象返回主显示器信息，需通过window.screenLeft/screenTop判断多屏位置。
- 跨设备测试：不同设备（如手机、平板、桌面）的devicePixelRatio差异显著，需全面测试。
通过合理使用这5个属性，可精准获取屏幕信息并实现跨设备适配，提升用户体验。
热门标签
