我需要一個全域變數來告訴我我當前使用的是什么設備，我的團隊希望我擁有移動設備、平板電腦、桌面設備和移動設備。我不知道該怎么做，但我開始在谷歌中挖掘并發現了這個功能：
const DeviceDetector = () => {
let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
hasTouchScreen = navigator.maxTouchPoints > 0;
} else {
const mQ = matchMedia("(pointer:coarse)");
if (mQ && mQ.media === "(pointer:coarse)") {
hasTouchScreen = !!mQ.matches;
} else if ("orientation" in window) {
hasTouchScreen = true; // deprecated, but good fallback
} else {
// Only as a last resort, fall back to user agent sniffing
const UA = navigator.userAgent;
hasTouchScreen =
/\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
/\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
}
}
if (hasTouchScreen) {
setDeviceType("Mobile");
} else {
setDeviceType("Desktop");
}
}
但這里的問題有兩個，第一：這個函式只檢測移動和桌面，但更大的問題是：我需要這個函式在頁面的寬度或高度發生變化時觸發，我嘗試通過在這個 useEffect 中添加它來實作：
useEffect(() =>{
DeviceDetector();
console.log('changing device type', deviceType);
},[window.innerWidth, window.innerHeight, window.outerWidth, window.outerHeight])
有一段時間它似乎作業正常，但是當它觸發時，它顯示始終是移動設備還是桌面取決于您加載頁面的內容。如果你們中的一些人遇到了同樣的問題并且可以朝著正確的方向面對我，我會很高興，有沒有一個工具可以讓事情變得更容易，我讀過 react-device-detect 但似乎它也需要重繪 頁面才能檢測設備變化。我嘗試了很多關于橫向移動的事情，但沒有運氣。
uj5u.com熱心網友回復：
你可以用鉤子。以前我一直使用它來訪問螢屏尺寸：
import { useState, useEffect } from 'react';
function getWindowDimensions() {
const { innerWidth: width, innerHeight: height } = window;
return {
width,
height
};
}
export default function useWindowDimensions() {
const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
useEffect(() => {
function handleResize() {
setWindowDimensions(getWindowDimensions());
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return windowDimensions;
}
您可以將尺寸映射到設備以獲取所需內容。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/339668.html
標籤：javascript 反应 反应钩子