css - 超极本和混合笔记本电脑的 Zurb Foundation 可见性等级

Question

我正在尝试隐藏平板电脑和智能手机的 div，但仍想在混合设备上显示它，例如 Microsoft Surface Pro。

基金会 4 提供 touch detection classes ，但是我不确定它是否会在混合设备上隐藏或显示。

有没有人有这方面的经验？我将如何控制它？

/* The touch detection classes */
.show-for-touch       /* Visible for touch enabled devices */
.hide-for-touch       /* Hidden for touch enabled devices */

Answer 1

Foundation 4 使用 Modernizr 来检测浏览器中对 Touch Events API 的支持，而不是触摸设备。我认为你最好的“修复”问题是嗅探用户代理以查看它是否与相关的匹配Mozilla/5.0(兼容；MSIE 10.0；Windows NT 6.2；Trident/6.0；Touch)，取自 User-agent string .为了让它面向 future ，也许只需查看用户代理字符串是否以 Touch 结尾并包含 Windows。如果您检测到这样的用户代理，则让 Modernizr 执行替代代码(您决定什么)。

我看到当前的 Foundation 4 版本使用自定义 Modernizr 构建，即 Build: http://modernizr.com/download/#-inlinesvg-svg-svgclippaths-touch-shiv-mq-cssclasses-teststyles- prefixes-ie8compat-load.

为了为 Modernizr 编写自定义测试，您需要 Modernizr.addTest，它在 Foundation 4 中包含的默认构建中缺失。您需要进行自定义构建，我已经为您准备好了，它还应该包含当前 Foundation Modernizr 自定义构建包含的所有其他“功能”Custom Modernizr Build with addtest

下面是一个示例 Modernizr 测试的外观，用于您的自定义用户代理测试。

Modernizr.addTest('winsurface', function () {
 return !!navigator.userAgent.match(/put your regex here/g);
});

然后，如果你想做一些事情以防测试呈阳性，你会做:

if (Modernizr.winsurface) {
...put your js code here
}