ios - iPad 设备的不同 CSS 值？

Question

我有一个简单的 HTML5 游戏，如果游戏在 iPad 上运行，我想为选择器设置不同的 CSS 值。

例如:

所有设备(不含 iPad)的正常值:

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

对于 iPad 设备应该是值:

top: 20vw;

我怎样才能以简单有效的方式做到这一点？

Answer 1

iPad 横向和纵​​向媒体查询:

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

只有横向，添加:

and (orientation : landscape)

只有纵向，添加:

and (orientation : portrait)

如果你不想使用媒体查询，因为你只想针对 iPad，你可以使用这个脚本(来源:Detect iPad users using jQuery?):

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

例如(JS):

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

(CSS):

#playIcon.ipad {
   top: 20vw;
}

js的方式我没有测试过，希望没有错...