diff --git a/src/lib/components/PhotoViewEnhanced.svelte b/src/lib/components/PhotoViewEnhanced.svelte index d17cef3..43970db 100644 --- a/src/lib/components/PhotoViewEnhanced.svelte +++ b/src/lib/components/PhotoViewEnhanced.svelte @@ -18,6 +18,23 @@ let imageRef = $state() let isUltrawide = $state(false) let imageLoaded = $state(false) + let isMobile = $state(false) + + // Detect if we're on a mobile device + onMount(() => { + // Check for touch capability and screen size + const checkMobile = () => { + const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0 + const isSmallScreen = window.innerWidth <= 768 + isMobile = hasTouch && isSmallScreen + } + + checkMobile() + + // Update on resize + window.addEventListener('resize', checkMobile) + return () => window.removeEventListener('resize', checkMobile) + }) // Check if image is ultrawide (aspect ratio > 2:1) function checkIfUltrawide() { @@ -146,7 +163,7 @@ }) $effect(() => { - if (isUltrawide && imageLoaded) { + if (isUltrawide && imageLoaded && !isMobile) { const cleanup = enhanceZoomForUltrawide() return cleanup } @@ -158,17 +175,27 @@ } -
+
{#key id || src} - + {#if !isMobile} + + {title + + {:else} {title - + {/if} {/key}
@@ -204,6 +231,22 @@ display: none !important; } + // Mobile-specific styles + .mobile { + .mobile-image { + // Allow native zoom + touch-action: pinch-zoom; + // Ensure image is contained within viewport initially + max-width: 100%; + max-height: 80vh; + width: auto; + height: auto; + // Prevent iOS from applying its own zoom on double-tap + -webkit-user-select: none; + user-select: none; + } + } + // Ultrawide zoom enhancements :global(.ultrawide-zoom) { :global([data-smiz-modal]) { diff --git a/src/routes/photos/[id]/+page.svelte b/src/routes/photos/[id]/+page.svelte index 6268dba..54b122c 100644 --- a/src/routes/photos/[id]/+page.svelte +++ b/src/routes/photos/[id]/+page.svelte @@ -315,9 +315,26 @@ window.addEventListener('keydown', handleKeydown) window.addEventListener('scroll', handleScroll) + // On mobile, ensure viewport allows zooming + const isMobile = 'ontouchstart' in window && window.innerWidth <= 768 + if (isMobile) { + const viewport = document.querySelector('meta[name="viewport"]') + if (viewport) { + viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes') + } + } + return () => { window.removeEventListener('keydown', handleKeydown) window.removeEventListener('scroll', handleScroll) + + // Reset viewport on unmount + if (isMobile) { + const viewport = document.querySelector('meta[name="viewport"]') + if (viewport) { + viewport.setAttribute('content', 'width=device-width, initial-scale=1.0') + } + } } })