Improve Android signature orientation detection

This commit is contained in:
Frudrax Cheng
2026-05-28 10:39:29 +08:00
parent 0f4ec91dc1
commit 2a614851db
+14 -2
View File
@@ -12,7 +12,10 @@ interface SignatureOverlayProps {
const isLandscapeNow = () => const isLandscapeNow = () =>
typeof window !== 'undefined' && typeof window !== 'undefined' &&
(window.matchMedia('(orientation: landscape)').matches || window.innerWidth > window.innerHeight); (window.matchMedia('(orientation: landscape)').matches ||
window.innerWidth > window.innerHeight ||
((window.visualViewport?.width ?? 0) > (window.visualViewport?.height ?? 0)) ||
Math.abs(window.screen.orientation?.angle ?? 0) % 180 === 90);
function SignatureOverlay({ open, onCancel, onConfirm }: SignatureOverlayProps) { function SignatureOverlay({ open, onCancel, onConfirm }: SignatureOverlayProps) {
const padRef = useRef<SignaturePadHandle>(null); const padRef = useRef<SignaturePadHandle>(null);
@@ -32,10 +35,17 @@ function SignatureOverlay({ open, onCancel, onConfirm }: SignatureOverlayProps)
} }
window.addEventListener('resize', update); window.addEventListener('resize', update);
window.addEventListener('orientationchange', update); window.addEventListener('orientationchange', update);
window.visualViewport?.addEventListener('resize', update);
const orientation = (screen as Screen & { const orientation = (screen as Screen & {
orientation?: { lock?: (o: string) => Promise<void>; unlock?: () => void }; orientation?: {
lock?: (o: string) => Promise<void>;
unlock?: () => void;
addEventListener?: (type: 'change', listener: () => void) => void;
removeEventListener?: (type: 'change', listener: () => void) => void;
};
}).orientation; }).orientation;
orientation?.addEventListener?.('change', update);
if (orientation?.lock) { if (orientation?.lock) {
orientation.lock('landscape').catch(() => { orientation.lock('landscape').catch(() => {
// ignore; iOS Safari and most browsers refuse outside fullscreen // ignore; iOS Safari and most browsers refuse outside fullscreen
@@ -53,6 +63,8 @@ function SignatureOverlay({ open, onCancel, onConfirm }: SignatureOverlayProps)
} }
window.removeEventListener('resize', update); window.removeEventListener('resize', update);
window.removeEventListener('orientationchange', update); window.removeEventListener('orientationchange', update);
window.visualViewport?.removeEventListener('resize', update);
orientation?.removeEventListener?.('change', update);
document.body.style.overflow = prevOverflow; document.body.style.overflow = prevOverflow;
orientation?.unlock?.(); orientation?.unlock?.();
}; };