iPad设备的CSS值是否不同？

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?

Answer 1

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 ...

Answer 2

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);

Answer 3

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...