如何為行動裝置客製化 CSS：@media手持裝置仍然相關嗎？

行動裝置CSS 自訂：

許多Web 開發人員在為iPhone 和Android 手機等手持裝置自訂CSS 時遇到挑戰。使用 @media 手持裝置的傳統方法不能在不同裝置上統一工作。

解決方案：使用 @media 查詢

要克服此限制，請使用 @media 查詢。此 CSS 技術可讓您定位特定的設備特徵，包括螢幕尺寸：

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

此查詢專門針對最大螢幕寬度為 480 像素的設備，通常涵蓋 iPhone。

iPhone 是一個例外

由 Safari 提供支援的 iPhone 瀏覽器由於其高級 CSS 不支援@media手持設備渲染能力。這可能會因較舊的 iOS 版本而異。

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

一些較新的行動裝置（例如 Droid X）具有更高的解析度。為了適應這些設備，請使用包含螢幕解析度的更具體的@media查詢：

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

進一步閱讀：

• [分開清單：媒體查詢對於響應式網頁設計](https://alistapart.com/article/responsive-web-design)
• [媒體查詢的W3C 候選推薦](https://www.w3.org/TR/css3-mediaqueries/ )

以上是如何為行動裝置客製化 CSS：@media手持裝置仍然相關嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！