How do I target iPhone and Android browsers with CSS @media queries?

CSS @media handheld Support on iPhone and Android Browsers

In an effort to tailor web pages for mobile browsers, developers may attempt to use CSS @media handheld queries to alter the page's appearance. However, some platforms, such as the iPhone via Safari, disregard this approach.

Alternative Approach for iPhone and Android

To address this limitation, the recommended solution is to employ media queries that specify specific device characteristics. The following code demonstrates targeting the iPhone (or any device with a screen width of 480px or less):

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

Targeting Devices with Higher Resolutions

As noted, devices like the Droid X have higher resolutions that may not be detected by the aforementioned query. To target such devices, media queries can inspect the device's physical characteristics, such as resolution:

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

Additional Resources

Further insights can be found in the provided A List Apart articles and the W3 Recommendation for media queries.

The above is the detailed content of How do I target iPhone and Android browsers with CSS @media queries?. For more information, please follow other related articles on the PHP Chinese website!