Different CSS values for iPad devices?

Question

I have simple HTML5 game and I would like to set different CSS values for selectors if the game is running on iPad.

For example:

Normal value for all devices (without iPad):

#playIcon {
    position: absolute;
    color: white;
    z-index: 10;
    top: 15vw;
    left: 33%;
}

and for iPad device should be value:

top: 20vw;

How can I do this in simple and effective way?

score 2 · Answer 1 · edited May 23 '17 at 11:51

Media query for iPad in landscape and portrait :

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)

only landscape, add :

and (orientation : landscape)

only portrait, add :

and (orientation : portrait)

If you don't want to use media queries because you want to target iPad only, you can use this script (source : Detect iPad users using jQuery?) :

var isiPad = navigator.userAgent.match(/iPad/i) != null;

And for example (JS):

if(isiPad) {
  var playIcon = document.getElementById('playIcon');
  playIcon.className = "ipad";
}

(CSS):

#playIcon.ipad {
   top: 20vw;
}

I haven't tested the js way, so I hope there is no mistake ...

score 0 · Answer 2 · answered Jul 06 '15 at 15:07

0

Don't think you can achieve iPad detection with css. With Javascript it's possible to check the user agent.

var isIpad = (navigator.userAgent.match(/iPad/i) != null);

answered Jul 06 '15 at 15:07

Matts

53
6

I would like to avoid using JS in this case if is it possible. I though that is possible to use in any way @media css. But if not, i must use JS. – redrom Jul 06 '15 at 15:14
You can get close with media queries by specifying dpi and min/max height/width. But you're not sure that only an iPad is detected. There'll certainly be other devices that also meet the query. – Matts Jul 07 '15 at 07:33

Jaromír Šetek · Answer 3 · 2015-07-06T15:20:40.997

If you want to target iPads only by css, the closest you can get is probably by using

@media only screen and (-webkit-min-device-pixel-ratio: 1) {}

This will also apply to any device with more dense pixels (like retina displays), which are a lot of devices. You can also add iPad display width and height to target it more precisely but there's no sureshot for targeting only iPads just with css.

Anyway, well designed product should be ok with non-specific styling, just using media queries for different viewports. Seeing what you are trying to do I assume you are trying to cope with some sort of iPad specific toolbar. These issues are tricky because you cannot be sure that with the next version of iOS you won't have to restyle it again. So if possible, try to solve this a way you won't have to cope with specific devices...

Different CSS values for iPad devices?

3 Answers3