正文

手机屏幕尺寸全解析：教你用JS轻松获取手机宽度与高度

/0 浏览量
1024

在移动端开发中，了解设备的屏幕尺寸对于适配和布局至关重要。JavaScript 提供了多种方法来获取设备的屏幕宽度和高度。本文将详细介绍如何使用 JavaScript 来获取手机屏幕的尺寸，并给出一些实用的代码示例。

获取屏幕宽度

要获取屏幕的宽度，可以使用 window.innerWidth 属性。这个属性返回当前窗口的内部宽度，包括滚动条，但不包括边框和工具栏。

// 获取屏幕宽度
var screenWidth = window.innerWidth;
console.log('屏幕宽度：' + screenWidth + 'px');

获取屏幕高度

获取屏幕高度的方式与获取宽度类似，使用 window.innerHeight 属性即可。这个属性返回当前窗口的内部高度。

// 获取屏幕高度
var screenHeight = window.innerHeight;
console.log('屏幕高度：' + screenHeight + 'px');

获取设备像素比

除了获取物理尺寸，有时还需要知道设备的像素比，以便进行更精确的布局。window.devicePixelRatio 属性可以提供这个信息。

// 获取设备像素比
var dpr = window.devicePixelRatio;
console.log('设备像素比：' + dpr);

响应式设计

在移动端开发中，响应式设计非常重要。可以使用 CSS 媒体查询来根据不同的屏幕尺寸应用不同的样式。

/* 默认样式 */
body {
  font-size: 16px;
}

/* 当屏幕宽度小于 600px 时 */
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

获取窗口大小变化

有时候，你可能需要知道窗口大小何时发生变化。可以使用 resize 事件来实现。

window.addEventListener('resize', function() {
  var screenWidth = window.innerWidth;
  var screenHeight = window.innerHeight;
  console.log('窗口大小变化：新宽度 ' + screenWidth + 'px，新高度 ' + screenHeight + 'px');
});

总结

通过以上方法，你可以轻松地使用 JavaScript 获取手机屏幕的宽度和高度，并根据这些信息进行响应式设计。掌握这些技巧，将有助于你创建更加适配各种设备的移动端应用。

-- 展开阅读全文 --