PHPackages exactquery/poly-pointer - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. exactquery/poly-pointer Abandoned → [deviscoding/poly-pointer](/?search=deviscoding%2Fpoly-pointer)Library[Utility & Helpers](/categories/utility) exactquery/poly-pointer ======================= Vanilla Javascript psuedo-polyfill for Media Query Level 4's '(pointer:coarse)' 2.0.3(5y ago)031MITJavaScript Since Apr 6Pushed 5y ago1 watchersCompare [ Source](https://github.com/jonesiscoding/poly-pointer)[ Packagist](https://packagist.org/packages/exactquery/poly-pointer)[ Docs](https://www.github.com/deviscoding/poly-pointer)[ RSS](/packages/exactquery-poly-pointer/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (7)Dependencies (1)Versions (8)Used By (0) PolyPointer =========== [](#polypointer) PolyPointer is a psuedo-polyfill for the [Media Query Level 4](https://www.w3.org/TR/mediaqueries-4/#descdef-media-pointer) *pointer:coarse* feature, written in vanilla javascript. It was written one evening after work when grew frustrated with not being able to present a touch friendly interface to our clients with touch screen devices without also having hybrid devices like laptops with touch screens using the same interface. It kind of worked. Then, I accidentally deleted the CodePen. After a few choice words, I rewrote it as what you see here. And it works. Imagine being able to use an easy little media query like @media screen and (pointer:coarse) to present a touch-friendly interface for your website's tablet and phone tapping visitors. Sound good? Then read on. Wait. You said Psuedo-Polyfill. ------------------------------- [](#wait--you-said-psuedo-polyfill) You caught that, did you? Geez, can't pull anything over on you. So, What the heck is a psuedo-polyfill? Due to the way that browser handle unrecognized CSS media query rules, there isn't an efficient way to read such rules in and use them. The browser cleverly changes your easy `@media screen and (pointer:coarse)` media query into the not-so-useful `@media not all`. Bummer. In this rare case, however, you can have your cake and eat it too! It's just a simple little alteration of your media query, and the inclusion of this friendly JS. How simple? Well, how about this: ``` @media handheld, screen and (pointer:coarse), screen and (-moz-touch-enabled) {} ``` What's that? You say that the *handheld* media type is deprecated? Exactly. And that's why we're using it. The browsers we would be targeting would be new enough to understand that query, yet old enough to not ignore it. Supported Devices & Browsers -------------------------------- [](#supported-devices--browsers) Surprisingly, there's only a few situations in which you'd want to bother to polyfill this feature. Ancient browsers wouldn't be on touch-only devices. New browsers already support it. Our targets are in between. Technically, the polyfill will work on any browser that supports [media queries](https://caniuse.com/#feat=css-mediaqueries), but does not [support media interaction features](https://caniuse.com/#feat=css-media-interaction). The real intent, however, is to target the situations below, where it is either obvious that the user does not have a "fine" pointer such as a mouse, or where the user is giving you some indication that they would prefer a touch interface. - IE10 on Win8, Metro Mode (w/ touchscreen device) - IE11 on Win8.1, Metro Mode (w/ touchscreen device) - MS Edge on Win10, Tablet Mode (w/ touchscreen device) - Android 4.4.4 and Below (not using Chrome) - iOS 8.4 and Below Show Me the Awesome! Let's Talk Usage. -------------------------------------- [](#show-me-the-awesome-lets-talk-usage) Check out this [Demo CodePen](https://codepen.io/jonesiscoding/full/qoQbXm/) on one of the devices mentioned above to see it in action! Using the script is a simple as placing the distribution JS in the `` of your HTML, then writing your CSS rules that are intended for touch devices inside media queries like so: ``` @media handheld, screen and (pointer:coarse), screen and (-moz-touch-enabled) { } ``` All of your CSS rules will then be followed by: modern browsers supporting the (almost) standard, all of the supported situations mentioned above, and.. oh, yeah. Mozilla Firefox. More on that later. Of course, you can also mix in any other sort of media query goodness, such as: ``` @media handheld and (max-width: 480px), screen and (pointer:coarse) and (max-width: 480px), screen and (-moz-touch-enabled) and (max-width:480px) ``` The only thing you can't do is mix other *media query level 4* conditions or feature in with the *handheld* media. #### Special Case: Mozilla Firefox [](#special-case-mozilla-firefox) Right. Mozilla Firefox. You might have noticed the `-moz` prefix on part of the media query above. Mozilla Firefox does not yet support `(pointer:coarse)` queries, nor does it provide us any way of detecting whether or not the user might be intending to see a touch interface. If you include the prefixed query, all users on Firefox would end up seeing the effects of your "touch" CSS rules. Here's the conundrum: - **iOS:** Firefox is just Safari in a fancy outfit. No prefix needed. - **Android:** Firefox would need the prefixed bit to see the rules. - **Windows:** No "Metro" or "Tablet" version of FF. My inclination is to use the prefixed rule and show everyone using Firefox on a touch screen device a touch interface, even if they have a "fine" pointer. I'd rather give something usable & unneeded than something unusable. If you'd rather your users on Firefox weren't seeing an interface that you designed for mobile browsers -- just omit the `screen and (-moz-touch-enabled)` portion of the rule and you'll be all set. Dependencies ------------ [](#dependencies) There aren't really any dependencies when using the distribution files. While the polyfill depends heavily on something testing the browser's capabilities and letting it know when to act, the files in the *dist* directory have [xqDetect](https://github.com/exactquery/xq-detect) built in to handle those duties. Nothing else to do. If you prefer to work with another detection library such as Modernizr, that's possible too. In that situation, you'll need to be writing your own tests similar to those in *detect-tests.js*, as well as implementing those tests in a similar manner to *metro-tablet.js*. Expressing Your Gratitude ------------------------- [](#expressing-your-gratitude) To be honest, someone just mentioning my code to their technically minded peers would be thrilling enough for me that I could possibly get get months of enjoyment out of each mention. Well, that is, if I knew about it. So, maybe star the repo. Or, you could send me a message on Twitter ([@jonesiscoding](https://twitter.com/jonesiscoding)). I enjoy coding enough that writing code can be it's own reward, but writing code that no one ever sees or uses is quite boring. I'll be very glad if this little library gets some use beyond it's original use case for my employer. ### Health Score 29 — LowBetter than 60% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity7 Limited adoption so far Community7 Small or concentrated contributor base Maturity68 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~131 days Recently: every ~195 days Total 7 Last Release 2168d ago Major Versions 1.0.3 → 2.0.12020-05-26 ### Community Maintainers ![](https://www.gravatar.com/avatar/d57a7df632f0f3297af28804aa4d48a6c9bbd67795056353fb3dd8c7ed7e1cb5?d=identicon)[jonesiscoding](/maintainers/jonesiscoding) --- Top Contributors [![jonesiscoding](https://avatars.githubusercontent.com/u/5215554?v=4)](https://github.com/jonesiscoding "jonesiscoding (7 commits)") --- Tags coarsejavascriptmediaqueriespointerpolyfilltouchtouchscreenuipolyfillpointertouchtabletmetromedia query level 4coarseexactquery ### Embed Badge ![Health badge](/badges/exactquery-poly-pointer/health.svg) ``` [![Health](https://phpackages.com/badges/exactquery-poly-pointer/health.svg)](https://phpackages.com/packages/exactquery-poly-pointer) ``` ### Alternatives [symfony/polyfill-mbstring Symfony polyfill for the Mbstring extension 7.8k1.2B515](/packages/symfony-polyfill-mbstring)[paragonie/random_compat PHP 5.x polyfill for random\_bytes() and random\_int() from PHP 7 8.2k655.0M404](/packages/paragonie-random-compat)[symfony/polyfill-ctype Symfony polyfill for ctype functions 4.0k982.0M125](/packages/symfony-polyfill-ctype)[symfony/polyfill-php72 Symfony polyfill backporting some PHP 7.2+ features to lower PHP versions 4.8k674.7M31](/packages/symfony-polyfill-php72)[symfony/polyfill-intl-idn Symfony polyfill for intl's idn\_to\_ascii and idn\_to\_utf8 functions 3.4k774.6M90](/packages/symfony-polyfill-intl-idn)[symfony/polyfill-intl-normalizer Symfony polyfill for intl's Normalizer class and related functions 2.1k830.2M36](/packages/symfony-polyfill-intl-normalizer) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)