25 lines
864 B
TypeScript
25 lines
864 B
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
/**
|
|
* Liefert den aktuellen View-Mode (`'desktop' | 'mobile'`) basierend auf
|
|
* Viewport-Breite + Touch-Heuristik. Mobile = Breite < 768 px ODER
|
|
* Touch-Primary-Pointer ohne Maus.
|
|
*/
|
|
export function useViewMode(): 'desktop' | 'mobile' {
|
|
const [mode, setMode] = useState<'desktop' | 'mobile'>(() => _detect());
|
|
|
|
useEffect(() => {
|
|
const _onResize = () => setMode(_detect());
|
|
window.addEventListener('resize', _onResize);
|
|
return () => window.removeEventListener('resize', _onResize);
|
|
}, []);
|
|
|
|
return mode;
|
|
}
|
|
|
|
function _detect(): 'desktop' | 'mobile' {
|
|
if (typeof window === 'undefined') return 'desktop';
|
|
const isNarrow = window.matchMedia('(max-width: 768px)').matches;
|
|
const isCoarse = window.matchMedia('(pointer: coarse)').matches;
|
|
return isNarrow || isCoarse ? 'mobile' : 'desktop';
|
|
}
|