How to Target iPhone and Android Browsers with CSS @media Queries?

CSS @media handheld Support for iPhone and Android Browsers

The @media handheld CSS rule targets handheld devices like the iPhone and Android. However, the iPhone does not fully support this rule due to its ability to render CSS on par with desktop browsers.

To target specific devices like the iPhone, use @media queries:

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

This query targets devices with a screen width of 480px or less.

Most devices now have higher resolutions, such as the Droid X with a resolution of 854x480. To target these devices, inspect the device's physical characteristics with advanced media queries:

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

This query targets devices with a screen width of 480px or less and a resolution of 163dpi.

For more detailed information on targeting specific devices, refer to the W3 Candidate Recommendation for media queries.

The above is the detailed content of How to Target iPhone and Android Browsers with CSS @media Queries?. For more information, please follow other related articles on the PHP Chinese website!