JavaScript根据CSS的Media Queries来判断浏览设备的方法

当网页在不同的浏览设备上进行访问时，为了提供良好的用户体验，我们需要根据访问设备的不同特征，为其应用不同的样式。这时就需要使用 CSS 的 Media Queries 了。但是，有时候我们可能希望在 JavaScript 中获取到当前页面所运行的设备的信息，以便动态地进行一些调整。本文将详细讲解如何通过 JavaScript 获取并应用 CSS Media Queries 中的信息。

获取当前设备信息

在 JavaScript 中，可以通过以下代码来获取当前设备的信息：

const mediaQueryList = window.matchMedia('your-media-query-string');

if (mediaQueryList.matches) {
  // 如果当前设备满足指定的媒体查询条件则执行此处的代码
} else {
  // 如果当前设备不满足指定的媒体查询条件则执行此处的代码
}

其中，window.matchMedia() 方法可以根据指定的媒体查询字符串返回一个 MediaQueryList 对象，该对象包含了当前浏览器视口是否满足媒体查询的结果。MediaQueryList 对象有一个 matches 属性，该属性返回一个布尔值，表示当前视口是否符合媒体查询条件。通过检查该属性的值，我们就可以根据当前视口的宽度、高度或其它属性，来自动判断当前设备的类型。

示例一：自适应文本字号

下面的示例展示了如何利用 JavaScript 和 JavaScript 根据 CSS 的媒体查询规则判断设备类型，实现一个自适应的文本字号。在该示例中，我们使用了 @media 规则的媒体查询功能来根据屏幕宽度调整文本字号，而通过 JavaScript 可以自动检测当前设备的屏幕宽度，以应用正确的文本字号。

<!DOCTYPE html>
<html>
<head>
  <title>自适应文本字号示例</title>
  <style type="text/css">
    /* 根据屏幕宽度调整文本字号 */
    @media (max-width: 600px) {
      body {
        font-size: 16px;
      }
    }
    @media (min-width: 600px) and (max-width: 1200px) {
      body {
        font-size: 20px;
      }
    }
    @media (min-width: 1200px) {
      body {
        font-size: 24px;
      }
    }
  </style>
</head>
<body>
  <h1>自适应文本字号示例</h1>
  <p>这是一个自适应文本字号的示例。屏幕宽度越小，文本字号越小；屏幕宽度越大，文本字号越大。</p>

  <script type="text/javascript">
    // 根据屏幕宽度自动调整文本字号
    const mediaQueryListSmall = window.matchMedia('(max-width: 600px)');
    const mediaQueryListMedium = window.matchMedia('(min-width: 600px) and (max-width: 1200px)');
    const mediaQueryListLarge = window.matchMedia('(min-width: 1200px)');

    const adjustFontSize = () => {
      let fontSize = '20px';
      if (mediaQueryListSmall.matches) {
        fontSize = '16px';
      } else if (mediaQueryListMedium.matches) {
        fontSize = '20px';
      } else if (mediaQueryListLarge.matches) {
        fontSize = '24px';
      }

      document.body.style.fontSize = fontSize;
    };

    // 初始计算一次，确保字体大小正确
    adjustFontSize();

    // 监听窗口变化，自动调整字体大小
    window.addEventListener('resize', adjustFontSize);
  </script>
</body>
</html>

以上代码将会根据当前设备屏幕宽度，自动调整正确的文本字号：

如果屏幕宽度小于等于 600 像素，则文本字号为 16 像素；
如果屏幕宽度在 601 ~ 1200 像素范围内，则字号为 20 像素；
如果屏幕宽度大于 1201 像素，则文本字号为 24 像素。

示例二：根据设备类型应用不同的 CSS 样式

下面的示例展示了如何利用 JavaScript 根据 CSS 的媒体查询规则判断设备类型，应用不同的 CSS 样式。在该示例中，我们介绍了如何利用表单元素在不同设备上的行为差异，来判断当前设备类型，并为其应用不同的样式。

<!DOCTYPE html>
<html>
<head>
  <title>根据设备类型应用不同的样式示例</title>
  <style type="text/css">
    /* 桌面端样式 */
    .desktop-only {
      display: block;
    }
    .mobile-only {
      display: none;
    }

    /* 移动端样式 */
    @media screen and (max-width: 600px) {
      .desktop-only {
        display: none;
      }
      .mobile-only {
        display: block;
      }
    }
  </style>
</head>
<body>
  <h1>根据设备类型应用不同的样式示例</h1>

  <form id="device-test">
    <p class="desktop-only">这是一个桌面端页面可见，移动端不可见的段落。</p>
    <p class="mobile-only">这是一个移动端页面可见，桌面端不可见的段落。</p>
  </form>

  <script type="text/javascript">
    // 根据表单元素的行为差异来判断当前设备类型
    const isMobileDevice = () => {
      const input = document.createElement('input');
      input.setAttribute('type', 'text');

      return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 || !(input.type === 'text');
    };

    // 判断设备类型并应用对应样式
    if (isMobileDevice()) {
      document.body.classList.add('mobile');
    } else {
      document.body.classList.add('desktop');
    }
  </script>
</body>
</html>

以上代码将会根据当前设备类型自动应用合适的 CSS 样式。如果当前设备是移动设备，则 .mobile-only 类的样式将会被应用，而 .desktop-only 类的样式将会被忽略；否则，.desktop-only 类的样式将会被应用，而 .mobile-only 类的样式将会被忽略。同时，JavaScript 还利用表单元素在移动设备和桌面设备上的行为差异，来判断当前设备类型。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript根据CSS的Media Queries来判断浏览设备的方法 - Python技术站