增加浏览器特性支持

master
yutent 2023-07-18 19:03:55 +08:00
parent 9f832290de
commit 0e5a2e7f4c
2 changed files with 38 additions and 8 deletions

View File

@ -3,7 +3,8 @@
<div class="env"> <div class="env">
<section class="info"> <section class="info">
<label class="field"> <label class="field">
<span>系统:</span><span>{{ $store.env.OS_NAME }}</span> <span>系统:</span
><span>{{ $store.env.OS_NAME }} {{ $store.env.OS_VERSION }}</span>
</label> </label>
<label class="field"> <label class="field">
<span>浏览器:</span><span>{{ $store.env.BROWSER_NAME }}</span> <span>浏览器:</span><span>{{ $store.env.BROWSER_NAME }}</span>
@ -43,7 +44,7 @@
.info { .info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 192px; width: 212px;
padding: 8px 12px; padding: 8px 12px;
background: var(--color-plain-1); background: var(--color-plain-1);

View File

@ -5,20 +5,49 @@
*/ */
const UA = navigator.userAgent.toLowerCase() const UA = navigator.userAgent.toLowerCase()
const UNKNOW_MATCH = [null, 'unknow']
const IS_CHROME = !!window.chrome const IS_CHROME = !!window.chrome
const IS_FIREFOX = !!window.sidebar const IS_FIREFOX = !!window.sidebar
const IS_LINUX = UA.includes('linux') const IS_LINUX = UA.includes('linux')
const IS_WIN = UA.includes('windows nt')
const IS_ANDROID = UA.includes('android')
const IS_IOS =
UA.includes('iphone') || UA.includes('ipad') || UA.includes('ipod')
const IS_MOBILE = IS_ANDROID || IS_IOS || UA.includes('mobile')
const OS_NAME = IS_ANDROID
? 'Android'
: IS_IOS
? 'IOS'
: IS_LINUX
? 'Linux'
: IS_WIN
? 'Windows'
: 'MacOS'
const OS_VERSION = IS_ANDROID ? UA.match(/android ([\d\.]*?);/)[1] : ''
const OS_NAME = IS_LINUX ? 'Linux' : 'MacOS'
const SCREEN = `${screen.width} x ${screen.height}` const SCREEN = `${screen.width} x ${screen.height}`
const BROWSER_NAME = IS_CHROME ? 'Chrome' : IS_FIREFOX ? 'Firefox' : 'Unknow' const BROWSER_NAME = IS_IOS
const GENERAL_VERSION = UA.match(/version\/([\d\.]*?) /) || [null, 'unknow'] ? 'Safari'
: IS_CHROME
? 'Chrome'
: IS_FIREFOX
? 'Firefox'
: 'Unknow'
const BROWSER_VERSION = IS_CHROME const GENERAL_VERSION = UA.match(/version\/([\d\.]*?) /) || UNKNOW_MATCH
? UA.match(/chrome\/([\d\.]*?) /)[1] const CHROME_VERSION =
IS_CHROME && (UA.match(/chrome\/([\d\.]*?) /) || UNKNOW_MATCH)
const IPAD_WEBKIT_VERSION =
IS_IOS && (UA.match(/crios\/([\d\.]*?) /) || GENERAL_VERSION)
const BROWSER_VERSION = IS_IOS
? IPAD_WEBKIT_VERSION[1]
: IS_CHROME
? CHROME_VERSION[1]
: GENERAL_VERSION[1] : GENERAL_VERSION[1]
export { OS_NAME, BROWSER_NAME, BROWSER_VERSION, SCREEN } export { OS_NAME, OS_VERSION, BROWSER_NAME, BROWSER_VERSION, SCREEN }