Target iPad3 but not iPad4

Question

Target iPad3 but not iPad4

367 Views Asked by Nasko At 31 October 2025 at 12:21

I'm try to add some css that will need to execute on iPad 3, but not iPad 4 or vice verse. I'm able to target both leaving the old version with:

   @media
   only screen and (-webkit-min-device-pixel-ratio: 2),
   only screen and (   min--moz-device-pixel-ratio: 2),
   only screen and (     -o-min-device-pixel-ratio: 2/1),
   only screen and (        min-device-pixel-ratio: 2),
   only screen and (                min-resolution: 192dpi),
   only screen and (                min-resolution: 2dppx) { }

but so far I can't find a difference to target between 3 and 4. Any css or JS solutions out there. Any help will be greatly appreciated

Original Q&A

There are 2 best solutions below

Michele 7 On 23 February 2015 at 10:32

Confirming that you can't get any difference by media queries or user-agents, I've found a difference between iPad3 and iPad4 using WebGL and js.

Using EXT_texture_filter_anisotropic and its extension object MAX_TEXTURE_MAX_ANISOTROPY_EXT you can return the maximum available anisotropy for a texture.

IPad3 returns 2, iPad4 returns 16

I guess this is due to their different GPU.

Demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Anisotropy</title>
</head>

<body>

    <p style="font-size: 100px;" id="anisotropy_val"></p>   

     <canvas id="webGLCanvas" width="400" height="400">
     </canvas>

</body>
<script>

function check_max_anisotropy() {

var canvas = document.getElementById("webGLCanvas");
var gl = canvas.getContext("experimental-webgl");


var ext = (
  gl.getExtension('EXT_texture_filter_anisotropic') ||
  gl.getExtension('MOZ_EXT_texture_filter_anisotropic') ||
  gl.getExtension('WEBKIT_EXT_texture_filter_anisotropic')
);

if (ext){
  var max = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
}

document.getElementById("anisotropy_val").innerHTML = max;

}

check_max_anisotropy();

</script>
</html>

**Alex** · Accepted Answer

You can't get any difference by using media queries or user-agents:

Media queries are the same
User Agent contains only iPad word, not version. Other info in UA is about iOS or Safari browser. iPad3 has iOS6 be default, but in can be updated for new versions. Safari depends from iOS version, so system and browser information is imprecise.

So there is only javascript+iOS feature detecting like was with iPad and iPad2 difference in event.acceleration, but there is no different in features of iPad3 and iPad4.

So you can't detect iPad3 only. May be you post here the problem with iPad3 and we can help you to solve it?

BUT:

If you use WebView component, you can do it in it. You can detect in by systemInfo.machine string in Objective-C:

NSString *machineName = [NSString stringWithCString:systemInfo.machine encoding:NSUTF8StringEncoding];

machineName for iPad3 are iPad3,1, iPad3,2 and iPad3,3. iPad4 are iPad3,4, iPad3,5 and iPad3,6 (don't ask why:)

And in WebView you can change your css file to iPad3.css by using WebResourceLoadDelegate for example.

Target iPad3 but not iPad4

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in CSS

Related Questions in MEDIA-QUERIES

Related Questions in IPAD-3

Trending Questions

Popular # Hahtags

Popular Questions