Detect specific iPhone or iPad model with php

问题

My site sells accessories, spare parts and repairs for iPhone, iPad and iPod and I'd like to give link suggestions for the categories the user might be looking for according to the specific iPhone/iPad/iPod model they're browsing from, using PHP.

I know I can use the header to detect if it's an iPhone, iPad or iPod but since I have a lot of categories I'd like it to be more specific and differentiate between iPhone 3G, 4 and iPhone 5 and likewise for iPad. Am I right the header doesn't give any info about the specific model?

Another way would be using CSS3 to check the browser resolution, but SEO-wise it could be a disaster to use a lot of "display: none;"'s for the "incorrect" models - especially since the hidden content would be mostly links.

Is the only solution to check if it's an iPhone, iPad or iPod using the php header and then afterwards try to differentiate the specific models using css media queries? It doesn't seem optimal and I doubt I would have a way to detect the difference between an iPad 3rd generation and an iPad 4th generation (Retina) since they have the same header and the same resolution as far as I know :/

Any suggestions on how I might achieve this?

Update: Another way could be to detect using javascript and set a cookie that can be handled by php as described on the link below, but it still doesn't give a way to differentiate devices with the same resolution and type (iPad 3 / 4, iPod Touch 2/3, iPhone 4/4S). http://www.bdoran.co.uk/2010/07/19/detecting-the-iphone4-and-resolution-with-javascript-or-php/

回答1:

I've been working on a project that requires me to detect the exact iOS device. To begin with, it was on the front end so I used these CSS media queries to load assets and adjust the layout precisely based on the device:

// Media queries for iPhone -webkit-text-size-adjust

// iPhone 5 & 5S in portrait & landscape
@media only screen and (min-device-width: 320px) and (max-device-width: 330px) {
    // ...
}

// iPhone 6, 7, & 8 in portrait & landscape
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
    // ...
}

// iPhone X in portrait & landscape
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) {
    // ...
}

// iPhone 6, 7, & 8 Plus in portrait & landscape
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
    // ...
}

There are new ones for the XR and XS Max here: iPhone XR / XS / XS Max CSS media queries

I don't think it would be much of an SEO disaster if this is a landing page and you have device-specific sub-pages you're linking to.