Detect specific iPad model via Javascript?

Question

I'm looking to detect a specific model of iPad via Javascript (iPad v. iPad 2 v. iPad Mini v..., etc).

This information is not contained in the user agent. Some iPads have Retina, some don't.

If possible, the ability to distinguish iPhone types as well would be helpful.

Is this possible?

Answer 1

To detect retina display use window.devicePixelRatio.

To detect iPad version use data at UA. Watch this answer. This list of iDevices UAs would helps you to find solution. As you see each model has it's own build number, you can use it for your purposes.

Answer 2

I don't think there's any way to detect a specific iPad model

But you can use CSS query to apply styles for retina devices, like

@media (-webkit-min-device-pixel-ratio: 2) {
    background-image: url(bg_@2X.png);
}

Hope it helps.