ipad - 如何使用modernizr检测iPad以进行自定义css

Question

我在 iPad 上有奇怪的网络布局视图，但在用户网络浏览器上它很好。我想使用modernizr作为我只想为iPad制作的自定义css的检测。

谢谢。:)

score 4 · Accepted Answer

这个问题已经有 1 年历史了，但我偶然发现了同样的问题：使用 Modernizr 检测 ipad……</p>

我从未见过 Modernizr 添加了 os-ipad 类……实际上要检测 iPad，您必须设置自定义测试，例如：

Modernizr.addTest('ipad', function () {
    return !!navigator.userAgent.match(/iPad/i);
});

所以，我很惊讶地看到先前的答案被接受为最佳答案……或者该选项已从当前的 Modernizr 构建中删除？

score 2 · Accepted Answer

我意识到这是一个较旧的线程 - 并且可能已经在其他地方进行了介绍。但是，我仍然设法到达这里，并没有得到满足我需求的好答案。

我最终发现可以满足我大部分一般需求的是 Modernizr html 类“触摸”。例如在桌面上，我使用一些“固定”背景图像。移动设备不太喜欢这样，所以...

在 scss 中：

html.touch {
   .element {
      background-attachment: scroll;
      background-size: cover;
   }
}

我意识到这并不能完全回答 OP 专门针对 iPad 的问题，但这很可能至少会帮助一些与我有类似问题的人。

score 0 · Accepted Answer

这个答案不再有效。

自从我回答了这个问题后，Modernizr 发生了变化……

=====================

Modernizr 为 HTML 标签添加了一堆 CSS 选择器。

如果您使用的是 iPad，它会添加选择器“os-iPad”。

因此，您可以针对 iPad 相关的 CSS 为它们添加前缀：html.os-iPad

html.os-iPad body
{
    background-color: #FF0000;
}

score -1 · Accepted Answer

您可能希望为此使用 css 媒体查询。看看这里的少框架：http: //lessframework.com/

4 回答 4