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
You can't get any difference by using media queries or user-agents:
iPad
word, not version. Other info in UA is aboutiOS
orSafari
browser.iPad3
has iOS6 be default, but in can be updated for new versions.Safari
depends fromiOS
version, so system and browser information is imprecise.So there is only
javascript
+iOS
feature detecting like was withiPad
andiPad2
difference inevent.acceleration
, but there is no different in features ofiPad3
andiPad4
.So you can't detect
iPad3
only. May be you post here the problem withiPad3
and we can help you to solve it?BUT:
If you use
WebView
component, you can do it in it. You can detect in bysystemInfo.machine
string inObjective-C:
machineName
for iPad3 areiPad3,1
,iPad3,2
andiPad3,3
.iPad4
areiPad3,4
,iPad3,5
andiPad3,6
(don't ask why:)And in
WebView
you can change your css file toiPad3.css
by usingWebResourceLoadDelegate
for example.