How to Customize CSS for Mobile Devices: Is @media handheld Still Relevant?

Mobile Device CSS Customization:

Many web developers encounter challenges when customizing CSS for handheld devices such as iPhones and Android phones. The conventional method of using @media handheld does not work uniformly across devices.

Solution: Use @media Queries

To overcome this limitation, employ @media queries. This CSS technique allows you to target specific device characteristics, including screen size:

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

This query specifically targets devices with a maximum screen width of 480px, which commonly covers iPhones.

iPhone as an Exception

iPhone browsers, powered by Safari, do not honor @media handheld due to their advanced CSS rendering capabilities. This may vary with older iOS versions.

Targeting Devices with Higher Resolutions

Some newer mobile devices, such as the Droid X, feature higher resolutions. To accommodate these devices, use more specific @media queries that incorporate screen resolution:

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

Further Reading:

• [A List Apart: Media Queries for Responsive Web Design](https://alistapart.com/article/responsive-web-design)
• [W3C Candidate Recommendation for Media Queries](https://www.w3.org/TR/css3-mediaqueries/)

The above is the detailed content of How to Customize CSS for Mobile Devices: Is @media handheld Still Relevant?. For more information, please follow other related articles on the PHP Chinese website!