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中文網其他相關文章!