移动设备的媒体查询适用于模拟移动设备，但不适用于我的手机

编程问答 2022-04-29

问题描述

我有这个媒体查询来检查设备是否是移动设备。

@media only screen and (hover: none) and (pointer: coarse) {
  body {
    font-size: 40px;
    color: purple; /*added this for debugging */
  }
  
  #navbar {
    justify-content: center;  
  }
  
  #nav-left {
    display: none;
  }
  
  #nav-right {
    font-size: 0.75em;
  }
  
  #projects {
    grid-template-columns: 400px 400px;
    grid-template-rows: 400px 400px /*400px 400px*/;
  }
  
  .project-wrapper {
    height: auto;
    width: auto;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
  
  .project-tile:hover .project-wrapper {
    animation-name: delay_link;
    animation-fill-mode: forwards;
    animation-duration: 0.7s;
  }
  
  @keyframes delay_link {
    90% {
      pointer-events: none;
    }
    100% {
      pointer-events: auto;
    }
  }
}

当我在 Chrome DevTools 中模拟移动设备时它会触发。注意文字变成紫色。

The website emulated on a virtual mobile device in Chrome DevTools

但是，如果我在手机上打开该页面，它将无法正常工作。为什么仿真设备与实际设备不同？

The website opened on Chrome for Android

我的完整代码：https://codepen.io/julian-sz/pen/vYxOLQx?editors=1101

我的完整代码（调试视图）：https://cdpn.io/julian-sz/debug/vYxOLQx/dXkqBaPZYZPM

我的 Chrome 版本：91.0.4472.77（官方版本）（64 位）（群组：91_Win_77）

我在 Android 上的 Chrome 版本（小米 A2 Lite）：90.0.4430.210

解决方法

你是否在 head 中添加了元视口？

<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
google-chrome-devtoolshtmlmedia-queriesmobile