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 = () =>
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) {
const padRef = useRef<SignaturePadHandle>(null);
@@ -32,10 +35,17 @@ function SignatureOverlay({ open, onCancel, onConfirm }: SignatureOverlayProps)
}
window.addEventListener('resize', update);
window.addEventListener('orientationchange', update);
window.visualViewport?.addEventListener('resize', update);
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?.addEventListener?.('change', update);
if (orientation?.lock) {
orientation.lock('landscape').catch(() => {
// 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('orientationchange', update);
window.visualViewport?.removeEventListener('resize', update);
orientation?.removeEventListener?.('change', update);
document.body.style.overflow = prevOverflow;
orientation?.unlock?.();
};