标记用户浏览器信息

标记用户浏览器信息

可以使用第三方库react-device-detect，方便做兼容性设置 或者使用navigator.userAgent

import * as deviceDetect from 'react-device-detect'

可以从deviceDetect中解构出浏览器名称、浏览器版本、引擎名称...etc

const {browserName, engineName} = deviceDetect

对于有兼容性问题的浏览器可以直接选择不展示

使用案例:

function checkBrowserVersion () {
    const {browserName, browserVersion, engineName, engineVersion, osName, osVersion} = DeviceDetect
    // alert(browserName+"_"+browserVersion+','+engineName+"_"+engineVersion+","+osName+"_"+osVersion)
    // setTimeout(() => console.log(DeviceDetect), 3000)

    // 浏览器版本必须需要兼容:where() CSS选择器
    if (browserName == 'Edge') return browserVersion >= 88
    if (browserName == 'IE') return false
    if (browserName == 'Firefox') return browserVersion >= 82
    if (browserName == 'Chrome') return browserVersion >= 88
    if (browserName == 'Opera') return browserVersion >= 74
    if (browserName == 'Safari') return browserVersion >= 14

    // 移动端浏览器
    // if (browserName == 'QQBrowser') return browserVersion >= 15
    // if (browserName == 'Quark') return browserVersion >= 7
    // if (browserName == 'Quark') return browserVersion >= 7
    // if (browserName == 'MIUI Browser') return browserVersion >= 9
    // if (browserName == 'WeChat') return browserVersion >= 8

    const mainEngineVersion = engineVersion.split('.')[0]
    if (engineName == "Blink") return mainEngineVersion >= 88
    // if (engineName == "Gecko") return mainEngineVersion >= 88
    // if (engineName == "WebKit") return mainEngineVersion >= 14
    // if (engineName == "Trident") return mainEngineVersion >= 88

    return true
}

参考链接： https://www.npmjs.com/package/react-device-detect 相关兼容性参考can i use或者mdn

使用navigator.userAgent

const [userAgent, setUserAgent] = useState('');
const [language, setLanguage] = useState('');
  useEffect(() => {
    setUserAgent(navigator.userAgent);
    setLanguage(navigator.language || navigator.userLanguage);
  }, []);

需要其他的也可以从navigator中获取 比如platform,hardwareConcurrency,onLine，巴拉巴拉