首页 > 文章 > web前端 > 为什么@media手持设备不是移动CSS的可靠解决方案？

为什么@media手持设备不是移动CSS的可靠解决方案？

Why is @media handheld not a reliable solution for mobile CSS?

调整移动设备的 CSS：了解@media手持设备的限制

当尝试专门为 iPhone 和 Android 等移动浏览器自定义 CSS 时，必须注意@media 手持设备的局限性。虽然这种媒体查询类型过去已被使用，但它在移动设备上并未得到普遍支持，特别是那些具有高级显示功能的设备。

要达到所需的效果，请考虑替代方法：

使用@media 屏幕查询代替@media 手持设备。这些查询使您能够根据特定的屏幕特征（例如分辨率和设备宽度）来定位设备。例如，要为 iPhone 设置网页样式：

@media screen and (max-device-width: 480px) {
  body {
    color: red;
  }
}

或者，CSS 功能查询可用于检测特定的浏览器功能。例如，要验证是否支持媒体查询：

@supports (media) {
  /* Styles to be applied if media queries are supported */
}

要定位具有特定分辨率的设备，@media 查询可以与分辨率媒体功能结合使用：

@media screen and (max-device-width: 480px) and (resolution: 163dpi) {
  body {
    color: blue;
  }
}