useOs
Sistem operasi yang sedang dipakai, ditebak dari navigator.
Sistem operasi: undetermined
Pintasan simpan di sini: Ctrl + S
Sistem operasi yang sedang dipakai, ditebak dari navigator.
Dipakai untuk hal-hal kecil yang memang berbeda per sistem: menampilkan ⌘K atau Ctrl+K, memilih kata "Bagikan" atau "Kirim". Jangan dipakai untuk memutuskan kemampuan — untuk itu periksa kemampuannya langsung, karena userAgent bisa dipalsukan dan sering memang dipalsukan.
Bernilai undetermined saat dirender di server dan pada gambaran pertama di peramban, lalu terisi setelah terpasang. Mengisinya lebih awal akan membuat HTML server berbeda dari gambaran pertama, dan Vue menggambar ulang bagian itu — persis masalah yang membuat sumbernya menunda pembacaan ini juga.
Pemasangan
npx shadcn-vue@latest add @kliping/use-os Perlu @kliping terdaftar di components.json project Anda. Lihat cara menyiapkannya.
Ikut terpasang sendiri: saat-terpasang.
Salin dulu is-browser, saat-terpasang — masing-masing memuat sumbernya di halamannya sendiri — lalu tempel berkas ini.
import { readonly, ref } from 'vue'
import { saatTerpasang } from '@/lib/saat-terpasang'
export type SistemOperasi =
| 'undetermined'
| 'macos'
| 'ios'
| 'windows'
| 'android'
| 'linux'
| 'chromeos'
interface NavigatorDenganUserAgentData extends Navigator {
userAgentData?: { platform?: string }
}
/** Baca sekali, tanpa reaktivitas. Berguna di luar komponen. */
export function bacaOs(): SistemOperasi {
if (typeof navigator === 'undefined')
return 'undetermined'
const nav = navigator as NavigatorDenganUserAgentData
const platform = (nav.userAgentData?.platform ?? navigator.platform ?? '').toLowerCase()
const userAgent = navigator.userAgent.toLowerCase()
const titikSentuh = navigator.maxTouchPoints ?? 0
if (userAgent.includes('android'))
return 'android'
// iPad modern menyamar sebagai macOS. Yang membedakannya cuma layar sentuh:
// Mac tidak punya, jadi `maxTouchPoints > 1` di platform Mac berarti iPad.
if (/iphone|ipad|ipod/.test(userAgent) || (platform === 'macintel' && titikSentuh > 1))
return 'ios'
if (userAgent.includes('cros'))
return 'chromeos'
if (platform.includes('win') || userAgent.includes('win'))
return 'windows'
if (platform.includes('mac') || userAgent.includes('mac'))
return 'macos'
if (platform.includes('linux') || userAgent.includes('linux'))
return 'linux'
return 'undetermined'
}
export function useOs() {
const os = ref<SistemOperasi>('undetermined')
saatTerpasang(() => {
os.value = bacaOs()
})
return readonly(os)
}API
export type SistemOperasi =
| 'undetermined'
| 'macos'
| 'ios'
| 'windows'
| 'android'
| 'linux'
| 'chromeos'
export function bacaOs(): SistemOperasi {
if (typeof navigator === 'undefined')
return 'undetermined'
export function useOs()