為什麼我的媒體查詢不能在瀏覽器上運行，但可以在行動裝置上運行？

媒體查詢：為特定裝置解析度自訂樣式

@media min-width 和max-width 屬性提供對基於樣式的精細屬性控制關於設備解析度。但是，使用此設定時會出現一個常見問題：它可以在行動裝置上運行，但不能在瀏覽器中運行。

問題原因

問題源自於存在指定視口寬度和使用者可擴充性的元標記。透過使用此元標記，您可以有效地覆蓋裝置的預設設定。因此，基於設備尺寸的 @media 規則變得不準確。

解決方案：重新排序樣式

解決方案是重新排列 CSS，以優先考慮較舊瀏覽器的預設樣式不支援@media。然後，使用@media規則為不同的裝置解析度套用特定的樣式。以下是建議的方法：

/* Default styles for older browsers */
body {
  font-size: 16px;
}

/* Styles for larger browsers (>= 960px) */
@media only screen and (min-width: 960px) {
  body {
    font-size: 18px;
  }
}

/* Styles for iPhone-sized devices (<= 480px) */
@media only screen and (max-device-width: 480px) {
  body {
    font-size: 14px;
  }
}

其他注意事項

• iPad 螢幕通常比iPhone 更大，因此您可能需要為它們單獨設定@ media 規則。
• 您可以使用 @media print{} 屬性來指定可列印版本的樣式內容。
• 始終在各種裝置和瀏覽器上徹底測試您的樣式，以確保它們正確呈現。

以上是為什麼我的媒體查詢不能在瀏覽器上運行，但可以在行動裝置上運行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！