26、HTML5 媒体查询与触摸事件全解析

HTML5 媒体查询与触摸事件全解析

在现代的网页开发中，尤其是涉及到 HTML5 和移动游戏开发时，媒体查询和触摸事件是非常重要的技术点。下面我们将详细解析媒体查询的各个属性以及触摸事件的相关知识。

媒体查询属性

1. device-aspect-ratio

device-aspect-ratio 的检查方式与 aspect-ratio 类似，不同之处在于其宽度和高度参考基于设备的宽度和高度。它是检查访问应用程序设备指纹的好方法，且独立于媒体查询测试时浏览器窗口的当前状态。

在响应用户操作时，测试 aspect-ratio 可能比 device-aspect-ratio 更好，因为用户可能会独立于设备屏幕比例更改浏览器窗口的尺寸。但要确定设备的真实纵横比，则应使用 device-aspect-ratio 。

需要注意的是，在查询纵横比时，很可能会定义冗余的媒体查询。在这种情况下，就像 CSS 一样，最后匹配的表达式会覆盖之前重复的表达式和值。

以下是一些示例代码：

// Aspect ratio evaluates to 1/1
@media all and (device-aspect-ratio: 1/1) {
  h1 {
    color: blue;
    font-size: 3.0em;
  }
}
// Aspect ratio evaluates to 1/1
@medi