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):

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:

Additional Resources

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