為什麼@media手持設備不是行動CSS的可靠解決方案？

調整行動裝置的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)

以上是為什麼@media手持設備不是行動CSS的可靠解決方案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！