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) {}

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

支持的设备和浏览器

令人惊讶的是，只有少数情况下你需要费力地填充这个功能。古老的浏览器不会出现在仅触摸的设备上。新的浏览器已经支持它。我们的目标是介于两者之间。

技术上，填充将适用于任何支持媒体查询但未支持媒体交互功能的浏览器。

然而，真正的目的是针对以下情况，在这些情况下，用户要么明显没有像鼠标这样的“精细”指针，要么用户向你表明他们更愿意使用触控界面。

Win8上的IE10，Metro模式（带触摸屏设备）
Win8.1上的IE11，Metro模式（带触摸屏设备）
Win10上的MS Edge，平板模式（带触摸屏设备）
Android 4.4.4及以下版本（非Chrome浏览器）
iOS 8.4及以下版本

展示它有多棒！让我们谈谈用法。

检查上述设备之一上的这个 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)

唯一不能做的是混合其他媒体查询级别4条件或与手持媒体一起使用。

特殊情况：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的方式实现这些测试。

表达您的感激之情

说实话，有人只是把我代码提到他们的技术-minded 同事那里就会让我兴奋不已，我可能每个月都能从每个提及中获得几个月的乐趣。好吧，那就是，如果我知道的话。所以，也许可以给repo点个赞。或者，你也可以给我发个Twitter消息（@jonesiscoding）。

我喜欢编程到足以让编程成为它自己的回报，但是编写没有人看到或使用的代码是非常无聊的。如果这个小库能够超越我为雇主使用的原始用例而得到一些使用，我会非常高兴。

exactquery / poly-pointer

维护者

详细信息