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

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

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

使用@media 屏幕查询

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

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

利用 CSS 功能查询

或者，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;
  }
}

更多资源

• [针对媒体查询的 W3C 候选推荐](https://www.w3.org/TR/css3-mediaqueries/)
• [Apple 的移动 Webkit 开发人员指南](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/GettingStarted/GettingStarted.html)
• [分开列表：针对多个视口进行设计](https: //alistapart.com/article/viewports)