README

PolyPointer 是 Media Query Level 4 中 pointer:coarse 功能的伪填充库，使用纯 JavaScript 编写。

这是在工作后的一天晚上编写的，因为无法为触摸屏设备提供友好的触摸界面而感到沮丧，同时又不想使用像带触摸屏的笔记本电脑这样的混合设备使用相同的界面。它有点效果。然后，我不小心删除了 CodePen。在说了几句狠话之后，我把它重新编写成你现在看到的样子。而且它真的可行。

想象一下，能够使用一个简单的媒体查询如 @media screen and (pointer:coarse)，为您的网站平板和手机触摸访问者提供触摸友好型界面。

听起来不错？那么继续阅读。

等等。你说伪填充？

你注意到这一点了吗？哎呀，我怎么能骗过你呢。那么，伪填充到底是什么呢？

由于浏览器处理未识别的 CSS 媒体查询规则的方式，没有一种有效的方法来读取这些规则并使用它们。浏览器巧妙地将您的简单 @media screen and (pointer:coarse) 媒体查询转换为不那么有用的 @media not all。真糟糕。

然而，在这种情况下，您可以既尝到蛋糕又吃到它！这只是对媒体查询的一个简单修改，并包含这个友好的 JS。有多简单？好吧，比如这样

@media handheld, screen and (pointer:coarse), screen and (-moz-touch-enabled) {}

那是什么？你说 handheld 媒体类型已经弃用了？没错。这就是我们为什么要使用它的原因。我们要针对的浏览器足够新，可以理解这个查询，但又足够旧，不会忽略它。

支持的设备和浏览器

令人惊讶的是，只有少数情况下您需要费力为此功能进行填充。旧浏览器不会在仅触摸设备上运行。新浏览器已经支持它。我们的目标是介于两者之间。

技术上，此填充库将在支持媒体查询但不支持媒体交互功能的任何浏览器上工作。

然而，真正的意图是针对以下情况，在这些情况下，用户要么明显没有鼠标这样的“精细”指针，要么用户已经向你表明他们更喜欢触摸界面。

IE10 on Win8, Metro Mode (with touchscreen device)
IE11 on Win8.1, Metro Mode (with touchscreen device)
MS Edge on Win10, Tablet Mode (with touchscreen device)
Android 4.4.4 and Below (not using Chrome)
iOS 8.4 and Below

让我展示一下！让我们谈谈使用方法。

检查以下设备之一上的这个 Demo CodePen，看看它的实际效果！

使用此脚本非常简单，只需将分发的 JS 放在 HTML 的 <HEAD> 中，然后在媒体查询中编写为触摸设备设计的 CSS 规则

@media handheld, screen and (pointer:coarse), screen and (-moz-touch-enabled) {
    <Your CSS Rules Here>
}

然后，所有您的 CSS 规则都将遵循：支持（几乎）标准的现代浏览器，上述所有支持的情况，以及……哦，是的。Mozilla Firefox。关于这一点稍后详细说明。

当然，您还可以混合其他类型的媒体查询，例如

@media handheld and (max-width: 480px), screen and (pointer:coarse) and (max-width: 480px), screen and (-moz-touch-enabled) and (max-width:480px)

唯一不能做的是将其他 media query level 4 条件或功能与 handheld 媒体混合。

特殊情况：Mozilla Firefox

没错。Mozilla Firefox。你可能已经注意到了上面的媒体查询中有一部分使用了 -moz 前缀。Mozilla Firefox 还不支持 (pointer:coarse) 查询，也没有提供任何方法来检测用户是否可能想要查看触摸界面。如果你包含了带前缀的查询，Firefox 上的所有用户都会看到你的 "触摸" CSS 规则的效果。这里有个难题

iOS: Firefox 只是穿着华丽装束的 Safari。不需要前缀。
Android: Firefox 需要带前缀的部分才能看到这些规则。
Windows: FF 没有所谓的 "Metro" 或 "平板" 版本。

我倾向于使用带前缀的规则，让所有使用触摸屏设备的 Firefox 用户都能看到触摸界面，即使他们有 "精细" 指针。我宁愿提供一些可用的但不需要的东西，也不愿提供一些不可用的。

如果你不希望 Firefox 用户看到你为移动浏览器设计的界面，只需省略规则中的 screen and (-moz-touch-enabled) 部分即可。

依赖项

在使用分发文件时实际上没有太多依赖项。虽然 polyfill 严重依赖于检测浏览器功能并在需要时通知它，但 dist 目录中的文件已经内置了 xqDetect 来处理这些任务。没有其他要做的。

如果你更喜欢使用其他检测库，如 Modernizr，也是可以的。在这种情况下，你需要编写自己的测试，类似于 detect-tests.js 中的测试，以及以类似 metro-tablet.js 的方式实现这些测试。

表达你的感激之情

说实话，有人只是把我写的代码提到他们的技术同行面前，对我来说就足够令人兴奋了，我可能从每一次提及中获得几个月的乐趣。嗯，前提是我知道这件事。所以，也许你可以给仓库点个星。或者，你也可以在 Twitter 上给我发消息（@jonesiscoding）。

我喜欢编程，编程本身就是一种奖励，但编写没人看到或使用的代码相当无聊。如果这个小库在雇主原始用途之外得到一些使用，我会非常高兴。

deviscoding / poly-pointer

维护者

详细信息