正文

手机尺寸大揭秘：教你用JavaScript轻松获取手机屏幕宽高，轻松适配各种设备！

/0 浏览量
0605

在移动端开发中，适配不同尺寸的屏幕是开发者必须面对的挑战。今天，我们就来揭开手机尺寸的神秘面纱，并教你如何使用JavaScript轻松获取手机屏幕的宽度和高度，以便于我们在开发过程中更好地适配各种设备。

获取屏幕尺寸

首先，我们需要了解如何使用JavaScript来获取屏幕的宽度和高度。这可以通过window.innerWidth和window.innerHeight这两个属性来实现。

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

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

这段代码将分别获取当前窗口的宽度和高度，并将它们存储在screenWidth和screenHeight变量中。

适配不同设备

获取到屏幕尺寸后，我们可以根据这些尺寸来调整页面的布局和样式。以下是一些常见的适配方法：

响应式布局

响应式布局是一种能够根据不同屏幕尺寸自动调整页面布局的技术。我们可以使用CSS媒体查询来实现响应式布局。

/* 默认样式 */
.container {
  width: 100%;
}

/* 当屏幕宽度小于600px时 */
@media (max-width: 600px) {
  .container {
    width: 90%;
  }
}

这段CSS代码定义了一个.container类，其宽度默认为100%。当屏幕宽度小于600px时，.container的宽度将调整为90%。

百分比布局

百分比布局是一种基于屏幕宽度的布局方式。我们可以使用百分比来设置元素的宽度、高度和边距。

.container {
  width: 50%;
  height: 50%;
  margin: 20px;
}

这段CSS代码定义了一个.container类，其宽度为屏幕宽度的50%，高度为屏幕高度的50%，并且上下左右各添加了20px的边距。

实战案例

下面我们通过一个简单的例子来演示如何使用JavaScript获取屏幕尺寸，并根据屏幕尺寸调整页面布局。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>屏幕尺寸适配示例</title>
  <style>
    .container {
      width: 100%;
      height: 200px;
      background-color: #f0f0f0;
      text-align: center;
      line-height: 200px;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div class="container" id="container">这是一个响应式布局的示例</div>
  <script>
    var container = document.getElementById('container');
    var screenWidth = window.innerWidth;
    var screenHeight = window.innerHeight;

    if (screenWidth < 600) {
      container.style.fontSize = '16px';
    } else {
      container.style.fontSize = '24px';
    }
  </script>
</body>
</html>

在这个例子中，我们创建了一个.container类，其高度和宽度分别为200px和100%。然后，我们使用JavaScript获取屏幕尺寸，并根据屏幕宽度调整.container的字体大小。

通过以上方法，我们可以轻松地获取手机屏幕尺寸，并根据不同设备进行适配。希望这篇文章能帮助你更好地应对移动端开发中的挑战！

-- 展开阅读全文 --