0

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

Foundation 4 提供了触摸检测类,但我不确定它是否会在混合设备上隐藏或显示。

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

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

1 回答 1

1

Foundation 4 使用 Modernizr 来检测浏览器中对触摸事件 API 的支持,而不是触摸设备。我认为你最好的“解决”问题是嗅探用户代理,看看它是否与相关的匹配 Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; Touch),取自User-agent string。为了使其成为未来的证明,也许只需查看用户代理字符串是否以 . 结尾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 自定义构建包含带有 addtest 的自定义 Modernizr 构建

这是用于自定义用户代理测试的示例 Modernizr 测试的外观。

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

然后,如果您想在测试结果呈阳性的情况下做某事,您可以:

if (Modernizr.winsurface) {
...put your js code here
}
于 2013-07-16T19:55:57.113 回答