diff --git a/public/mobile.css b/public/mobile.css index d0a76f0..b476fed 100644 --- a/public/mobile.css +++ b/public/mobile.css @@ -113,9 +113,9 @@ body { .grid-section { flex: 1; display: flex; - align-items: center; + align-items: flex-start; justify-content: center; - padding: 5px; + padding: 5px 5px 0 5px; overflow: hidden; background: #f8f9fa; } diff --git a/public/mobile.js b/public/mobile.js index 59c65af..772b0e2 100644 --- a/public/mobile.js +++ b/public/mobile.js @@ -100,10 +100,10 @@ class MobileCrosswordGame { } calculateCellSize(rows, cols) { - // Mobile-specific calculation + // Mobile-specific calculation - maximize grid size const headerHeight = 50 const progressHeight = 35 - const controlsHeight = 75 + const controlsHeight = 70 const padding = 16 const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - padding @@ -114,8 +114,18 @@ class MobileCrosswordGame { let cellSize = Math.min(maxFromHeight, maxFromWidth) - // Constrain to 30-42px for mobile readability - cellSize = Math.max(30, Math.min(42, cellSize)) + // Allow larger cells on mobile - 32-50px range + cellSize = Math.max(32, Math.min(50, cellSize)) + + console.log('Mobile grid:', { + availableHeight, + availableWidth, + rows, + cols, + cellSize, + totalGridHeight: rows * cellSize, + totalGridWidth: cols * cellSize + }) return cellSize } diff --git a/public/redirect.js b/public/redirect.js index 21622ce..e369762 100644 --- a/public/redirect.js +++ b/public/redirect.js @@ -11,20 +11,27 @@ // Detect device type const width = window.innerWidth - const isMobileDevice = /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) - const isTabletDevice = /iPad|Android/i.test(navigator.userAgent) && !isMobileDevice + const height = window.innerHeight + const userAgent = navigator.userAgent + + // Better mobile detection + const isMobilePhone = /Android.*Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) + const isTabletDevice = /iPad|Android(?!.*Mobile)/i.test(userAgent) let targetPage = null // Determine target page based on device and screen size - if (width < 600 || (isMobileDevice && width < 768)) { - // Mobile: < 600px or mobile device < 768px + if (isMobilePhone && width < 768) { + // Mobile phones: detected mobile device < 768px targetPage = 'mobile.html' - } else if (width >= 600 && width < 1024) { - // Tablet: 600-1024px + } else if (width < 500) { + // Small screens: force mobile + targetPage = 'mobile.html' + } else if (isTabletDevice || (width >= 500 && width < 1200)) { + // Tablets: iPad/Android tablet OR 500-1200px targetPage = 'tablet.html' } else { - // Desktop: >= 1024px + // Desktop: >= 1200px targetPage = 'index.html' } diff --git a/public/tablet.js b/public/tablet.js index fd4392f..34e1886 100644 --- a/public/tablet.js +++ b/public/tablet.js @@ -95,7 +95,7 @@ class TabletCrosswordGame { const headerHeight = 70 const progressHeight = 50 const sidebarWidth = 180 - const padding = 60 // 15px on each side x2 + const padding = 60 // Total padding const availableHeight = window.innerHeight - headerHeight - progressHeight - padding const availableWidth = window.innerWidth - sidebarWidth - padding @@ -105,8 +105,20 @@ class TabletCrosswordGame { let cellSize = Math.min(maxFromHeight, maxFromWidth) - // Tablet range: 50-90px for good visibility and touch - cellSize = Math.max(50, Math.min(90, cellSize)) + // Tablet range: 45-80px for better fit and touch + cellSize = Math.max(45, Math.min(80, cellSize)) + + console.log('Tablet grid:', { + screenWidth: window.innerWidth, + screenHeight: window.innerHeight, + availableHeight, + availableWidth, + rows, + cols, + cellSize, + totalGridHeight: rows * cellSize, + totalGridWidth: cols * cellSize + }) return cellSize }