iPad 设备的不同 CSS 值？

Posted 2023-03-12

【中文标题】iPad 设备的不同 CSS 值？

【英文标题】：Different CSS values for iPad devices?

【发布时间】：2015-07-06 14:58:09

【问题描述】：

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

例如：

所有设备的正常值（不带 iPad）：

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

对于 iPad 设备应该是值：

top: 20vw;

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

【参考方案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的方式我没有测试过，希望没有错误...

【参考方案2】：

不要以为用 css 就能实现 iPad 检测。 使用 javascript 可以检查用户代理。

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

【讨论】：

如果可能的话，我想避免在这种情况下使用 JS。我虽然可以以任何方式使用@media css。但是如果没有，我必须使用JS。

您可以通过指定 dpi 和最小/最大高度/宽度来接近媒体查询。但您不确定是否只检测到 iPad。肯定会有其他设备也满足查询。

【参考方案3】：

如果你只想通过 css 来定位 iPad，你可以得到最接近的可能是使用

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

这也适用于具有更密集像素的任何设备（例如视网膜显示器），这些设备数量众多。您还可以添加 iPad 显示宽度和高度以更精确地定位它，但仅使用 css 仅定位 iPad 是没有把握的。

无论如何，设计良好的产品应该可以使用非特定样式，只需针对不同视口使用媒体查询。看到你正在尝试做什么，我假设你正在尝试处理某种特定于 iPad 的工具栏。这些问题很棘手，因为您无法确定在下一个版本的 ios 中您不必再次重新设置样式。因此，如果可能，请尝试以一种无需处理特定设备的方式来解决这个问题...