目录
设备访问
设备信息访问
navigator.userAgent：获取浏览器的用户代理字符串，从中可以解析出设备类型、操作系统、浏览器版本等信息。
const userAgent = navigator.userAgent;
console.log(userAgent); // 输出类似 "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：获取设备平台信息。
const platform = navigator.platform;
console.log(platform); // 输出类似 "MacIntel" 或 "iPhone"
navigator.maxTouchPoints：判断设备是否支持触屏，以及触点数量。
const isTouchDevice = navigator.maxTouchPoints > 0;
console.log(`Is touch device: ${isTouchDevice}`);
设备传感器访问
DeviceOrientationEvent 和 DeviceMotionEvent：访问设备的陀螺仪、加速度计等运动传感器。
if ("DeviceOrientationEvent" in window) {
window.addEventListener("deviceorientation", (event) => {
console.log("Alpha: ", event.alpha); // 设备围绕Z轴旋转的角度
console.log("Beta: ", event.beta); // 设备围绕X轴旋转的角度
console.log("Gamma: ", event.gamma); // 设备围绕Y轴旋转的角度
});
}
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 API：获取用户的地理位置信息。
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.");
}
输入设备交互
触摸与手势
touchstart, touchmove, touchend, touchcancel 事件：处理触摸屏设备上的触摸交互。
document.body.addEventListener("touchstart", (event) => {
console.log("Touch started:", event.touches);
});
document.body.addEventListener("touchmove", (event) => {
event.preventDefault(); // 阻止默认滚动行为
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);
});
鼠标与指针
mousedown, mousemove, mouseup, mouseout 等事件：处理鼠标或指针设备的输入。
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:");
});
键盘输入
keydown, keyup, keypress 事件：处理键盘输入。
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);
});
输出设备交互
屏幕输出
window.screen 对象：获取屏幕相关信息。
console.log("Screen width:", window.screen.width);
console.log("Screen height:", window.screen.height);
console.log("Color depth:", window.screen.colorDepth);
打印输出
window.print() 方法：触发打印对话框。
document.getElementById("printButton").addEventListener("click", () => {
window.print();
});
音频与视频输出
<audio> 和 <video> 元素：播放音频与视频文件。
<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>
振动输出
navigator.vibrate()方法（仅限移动设备）：触发设备振动。
if ("vibrate" in navigator) {
navigator.vibrate(1000); // 振动1秒
} else {
console.warn("Vibration API is not supported by this browser.");
}
