Device access
Device information access
navigator.userAgent: Get the browser’s user agent string, from which you can parse the device type, operating system, browser version and other information.
const userAgent = navigator.userAgent;
console.log(userAgent); // Output similar to "Mozilla/5.0 (iPhone; CPU iPhone OS 14_7_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Mobile/15E148 Safari/604.1"navigator.platform: Get device platform information.
const platform = navigator.platform;
console.log(platform); // Output similar to "MacIntel" or "iPhone"navigator.maxTouchPoints: Determine whether the device supports touch screen and the number of touch points.
const isTouchDevice = navigator.maxTouchPoints > 0;
console.log(`Is touch device: ${isTouchDevice}`);Device sensor access
DeviceOrientationEvent and DeviceMotionEvent: access the device’s gyroscope, accelerometer and other motion sensors.
if ("DeviceOrientationEvent" in window) {
window.addEventListener("deviceorientation", (event) => {
console.log("Alpha: ", event.alpha); // Angle of device rotation around the Z axis
console.log("Beta: ", event.beta); // Angle of device rotation around the X axis
console.log("Gamma: ", event.gamma); // Angle of device rotation around the Y axis
});
}
if ("DeviceMotionEvent" in window) {
window.addEventListener("devicemotion", (event) => {
console.log("Acceleration X: ", event.acceleration.x);
console.log("Acceleration Y: ", event.acceleration.y);
console.log("Acceleration Z: ", event.acceleration.z);
console.log("Rotation Rate Alpha: ", event.rotationRate.alpha);
console.log("Rotation Rate Beta: ", event.rotationRate.beta);
console.log("Rotation Rate Gamma: ", event.rotationRate.gamma);
});
}Geolocation access
Geolocation API: Get the user’s geolocation information.
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(
(position) => {
console.log("Latitude: ", position.coords.latitude);
console.log("Longitude: ", position.coords.longitude);
console.log("Accuracy: ", position.coords.accuracy);
},
(error) => {
console.error("Error getting location:", error.message);
},
{ enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
);
} else {
console.warn("Geolocation is not supported by this browser.");
}Input device interaction
Touch and gestures
touchstart, touchmove, touchend, touchcancel events: handle touch interactions on touchscreen devices.
document.body.addEventListener("touchstart", (event) => {
console.log("Touch started:", event.touches);
});
document.body.addEventListener("touchmove", (event) => {
event.preventDefault(); // Prevent default scrolling behavior
console.log("Touch moved:", event.touches);
});
document.body.addEventListener("touchend", (event) => {
console.log("Touch ended:", event.changedTouches);
});
document.body.addEventListener("touchcancel", (event) => {
console.log("Touch cancelled:", event.touches);
});Mouse and pointer
mousedown, mousemove, mouseup, mouseout and other events: handle input from the mouse or pointer device.
document.body.addEventListener("mousedown", (event) => {
console.log("Mouse down:", event.clientX, event.clientY);
});
document.body.addEventListener("mousemove", (event) => {
console.log("Mouse move:", event.clientX, event.clientY);
});
document.body.addEventListener("mouseup", (event) => {
console.log("Mouse up:", event.clientX, event.clientY);
});
document.body.addEventListener("mouseout", (event) => {
console.log("Mouse out:");
});Keyboard Input
keydown, keyup, keypress events: handle keyboard input.
document.addEventListener("keydown", (event) => {
console.log("Key down:", event.key);
});
document.addEventListener("keyup", (event) => {
console.log("Key up:", event.key);
});
document.addEventListener("keypress", (event) => {
console.log("Key press:", event.key);
});Output device interaction
Screen output
window.screen object: Get screen related information.
console.log("Screen width:", window.screen.width);
console.log("Screen height:", window.screen.height);
console.log("Color depth:", window.screen.colorDepth);Print output
window.print() method: triggers the print dialog.
document.getElementById("printButton").addEventListener("click", () => {
window.print();
});Audio and video output
<audio> and <video> elements: play audio and video files.
<audio controls>
<source src="your-audio-file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls>
<source src="your-video-file.mp4" type="video/mp4">
Your browser does not support the video element.
</video>Vibration Output
navigator.vibrate() method (mobile only): triggers the device to vibrate.
if ("vibrate" in navigator) {
navigator.vibrate(1000); // Vibrate for 1 second
} else {
console.warn("Vibration API is not supported by this browser.");
}
