Skip to main content
100%

Various JavaScript methods for detecting touch/mobile devices

✓ Published0🌍 Public
Aandresin87
Last edited Sep 6, 2019
Created on Sep 3, 2021

This example presents four distinct JavaScript techniques for detecting touch or mobile devices, each demonstrated in a single file. It shows how developers can combine modern and legacy APIs to identify touchscreen capability, from checking the `ontouchstart` event and `navigator.MaxTouchPoints` to using `window.matchMedia` with `pointer: coarse` and `any-pointer: coarse` media queries. The code also includes a Modernizr-inspired approach that tests multiple vendor-prefixed queries, and a robust fallback method that checks for Pointer Events, `TouchEvent`, and event handlers. The example relies solely on native browser APIs without external libraries.

AI-generated description

Similar vizzes

Loading thumbnail…

if isMobile

This example demonstrates a simple branching interaction that checks whether a user is on a touch-enabled device. It shows a plain JavaScript conditional statement that executes one block of code if `isMobile` evaluates to true, and a different block otherwise. The code relies on the `ontouchstart` and `onmsgesturechange` window properties to detect touch capability, assigning the result to a variable. No visualization libraries or data sources are used; the example is purely a logic skeleton for responsive behavior.

LLayne Smith
69% match
Loading thumbnail…

Title here

This example tests browser support for coarse and fine pointer media queries. It displays the boolean results of `pointer: coarse`, `any-pointer: coarse`, `pointer: fine`, and `any-pointer: fine` as headings using D3 v5. The code uses `window.matchMedia` to assess the user’s primary and any input device, and dynamically loads D3 based on browser compatibility.

GGerardoFurtado
62% match
Loading thumbnail…

Minimal reponsive javascript framework

This example demonstrates a responsive design framework that switches between mobile, tablet, and desktop states based on the browser window's width. It uses jQuery to listen for window resize events, comparing the document width against breakpoints of 768 and 1100 pixels. The code triggers custom 'MOBILE', 'TABLET', and 'DESKTOP' events on the document, attaching show/hide functions to these states via the jQuery `live` API. A 200-millisecond timer minimizes lag during resizing.

SSimonS
60% match
Loading thumbnail…

Multitouch

This multitouch visualization maps each finger contact to a colored circle on an SVG canvas, with touches tracked by identifier. The example uses D3’s `d3.touches` API to capture touch events and `d3.event` to prevent default scrolling. Newly detected touches enter with an elastic scaling animation via `transition.attr("r", …)`, while removed touches shrink and exit. Circle positions update directly from touch coordinates, and color assignment uses `d3.scale.category10`. The code relies on touch-supporting browsers, such as iOS Safari, to dispatch the appropriate events.

Mmbostock
58% match
Loading thumbnail…

CSS Media Queries for Desktop, Tablet, Mobile.

This example maps out CSS Media Query breakpoints for desktop, tablet, and mobile screen sizes, using plain CSS within a gist by MistyBlunch. It shows how `@media` rules with `min-width` and `max-width` conditions segment the viewport into device-specific ranges, from high-resolution desktops (1281px and up) down to smartphones (320px to 480px). The code also demonstrates an `orientation: landscape` variant for tablets. No external libraries or data sources appear; it relies solely on native CSS syntax to define responsive behavior at each width threshold.

MMistyBlunch
57% match
Loading thumbnail…

multi-touch for Android Processing

This example demonstrates two-finger pinch-to-zoom and panning of a nested set of square outlines on an Android device. It uses the `MultiTouchController` library, which processes `MotionEvent` data to detect drags and stretches, and the sketch maintains a world offset and scale via `translate` and `scale`. A `TouchHelper` implements the controller’s callback interface, updating the translation and scale values based on touch positions, while the `draw()` function renders the scaled geometry with Processing for Android.

RRandomEtc
57% match
Loading thumbnail…

Fix for Magnifeye, starting on Line 1098.

This example demonstrates a mobile navigation system for a data-dashboard page, where users can click nav links to scroll to dashboard sections while the active link is automatically highlighted based on scroll position. The code uses plain JavaScript DOM APIs such as `querySelectorAll`, `addEventListener`, and `scrollTo` to manage link styling and smooth scrolling. It also includes a scroll-triggered highlight logic that tracks the viewport position and updates the active pill, while horizontally centering the active link within its container using `offsetLeft` and `clientWidth` calculations. The data source is the page’s own document structure, with no external libraries.

Aandreas-groos
56% match
Loading thumbnail…

JavaScript tips

This animated slideshow presents JavaScript coding tips and techniques, covering ES6 modules, destructuring, monkey patching, node.js binary scripts, and animation patterns. The code examples demonstrate practical implementations using TweenMax for timeline-based animations, including a draw/anim pattern and a 1-second reference scaling approach. It also showcases event handling for CSS transitions and transform property detection. The rendering uses code blocks with syntax highlighting, and the animation presents each tip sequentially, with the source gist serving as the data for the displayed content.

Aabernier
55% match