How to Detect iPhone and iPad Devices with CSS?

Detecting iPhone/iPad with CSS: Troubleshooting and Solutions

The original question sought to detect iPhone and iPad devices exclusively through CSS styling. An initial attempt to implement a solution using "@media handheld, only screen and (max-device-width: 480px)" proved unsuccessful.

The Solution:

To effectively detect iPhone, iPad, and their specific variants requires a more comprehensive approach. The following CSS media queries specifically target different device screen dimensions and pixel ratios:

iPhone and iPod touch:

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

iPhone 4 and iPod touch 4G:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

iPad:

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

By incorporating these media queries into your stylesheet, you can ensure that specific CSS styles are applied based on the detected device type. This approach provides greater flexibility and allows you to tailor the appearance of your website or application to different iOS devices.

The above is the detailed content of How to Detect iPhone and iPad Devices with CSS?. For more information, please follow other related articles on the PHP Chinese website!