如何使用 CSS @media 查詢定位 iPhone 和 Android 瀏覽器？

iPhone 和Android 瀏覽器上的CSS @media 手持裝置支援

為了為行動瀏覽器客製化網頁，開發人員可以嘗試使用CSS @media 手持查詢來改變頁面的外觀。但是，某些平台（例如透過 Safari 的 iPhone）會忽略此方法。

iPhone 和 Android 的替代方法

要解決此限制，建議的解決方案是使用指定特定裝置特徵的媒體查詢。以下程式碼示範了定位iPhone（或螢幕寬度為480 像素或更小的任何裝置）：

<link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)" />

定位具有更高解析度的裝置

如上所述，像Droid X 這樣的設備具有更高的分辨率，上述查詢可能無法檢測到。為了定位此類設備，媒體查詢可以檢查設備的物理特性，例如解析度：

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />

其他資源

可以在提供的A 中找到更多見解列出分開的文章和媒體查詢的W3 推薦。

以上是如何使用 CSS @media 查詢定位 iPhone 和 Android 瀏覽器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！