fix: reset zoom on orientation change in reader to prevent iOS auto-zoom
Temporarily inject maximum-scale=1 into viewport meta tag on orientation change to cancel the automatic zoom iOS Safari applies, then restore it to keep pinch-zoom available. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -80,10 +80,26 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Activer le zoom dans le reader en enlevant la classe no-pinch-zoom
|
// Activer le zoom dans le reader en enlevant la classe no-pinch-zoom
|
||||||
|
// et reset le zoom lors des changements d'orientation (iOS applique un zoom automatique)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.body.classList.remove("no-pinch-zoom");
|
document.body.classList.remove("no-pinch-zoom");
|
||||||
|
|
||||||
|
const handleOrientationChange = () => {
|
||||||
|
const viewport = document.querySelector('meta[name="viewport"]');
|
||||||
|
if (viewport) {
|
||||||
|
const original = viewport.getAttribute("content") || "";
|
||||||
|
viewport.setAttribute("content", original + ", maximum-scale=1");
|
||||||
|
// Restaurer après que iOS ait appliqué le nouveau layout
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
viewport.setAttribute("content", original);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("orientationchange", handleOrientationChange);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
|
window.removeEventListener("orientationchange", handleOrientationChange);
|
||||||
document.body.classList.add("no-pinch-zoom");
|
document.body.classList.add("no-pinch-zoom");
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|||||||
@@ -19,13 +19,9 @@ export function useTouchNavigation({
|
|||||||
|
|
||||||
// Helper pour vérifier si la page est zoomée (zoom natif du navigateur)
|
// Helper pour vérifier si la page est zoomée (zoom natif du navigateur)
|
||||||
const isZoomed = useCallback(() => {
|
const isZoomed = useCallback(() => {
|
||||||
// Utiliser visualViewport.scale pour détecter le zoom natif
|
|
||||||
// Si scale > 1, la page est zoomée
|
|
||||||
if (window.visualViewport) {
|
if (window.visualViewport) {
|
||||||
return window.visualViewport.scale > 1.05;
|
return window.visualViewport.scale > 1.05;
|
||||||
}
|
}
|
||||||
// Fallback pour les navigateurs qui ne supportent pas visualViewport
|
|
||||||
// Comparer la taille de la fenêtre avec la taille réelle
|
|
||||||
return window.innerWidth !== window.screen.width;
|
return window.innerWidth !== window.screen.width;
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user