56 lines
1.5 KiB
Markdown
56 lines
1.5 KiB
Markdown
# Mobile vs Desktop Setup
|
|
|
|
The crossword puzzle now has separate optimized versions for mobile and desktop/tablet devices.
|
|
|
|
## Files
|
|
|
|
### Mobile Version (< 768px width)
|
|
- **mobile.html** - Simplified mobile-optimized layout
|
|
- **mobile.css** - Mobile-first CSS with compact design
|
|
- **mobile.js** - Simplified game logic optimized for touch
|
|
|
|
### Desktop/Tablet Version (>= 768px width)
|
|
- **index.html** - Full-featured desktop layout
|
|
- **styles_v5.css** - Desktop/tablet responsive CSS
|
|
- **game.js** - Full game logic with advanced features
|
|
|
|
### Shared Files
|
|
- **puzzleData.js** - Puzzle data used by both versions
|
|
- **redirect.js** - Automatic device detection and redirection
|
|
|
|
## How It Works
|
|
|
|
1. User visits the site (index.html or mobile.html)
|
|
2. `redirect.js` detects device type
|
|
3. Automatically redirects to appropriate version:
|
|
- Mobile devices → mobile.html
|
|
- Desktop/tablet → index.html
|
|
|
|
## Key Differences
|
|
|
|
### Mobile Version Features:
|
|
- Compact header (50px)
|
|
- Simplified controls
|
|
- Touch-optimized grid (30-42px cells)
|
|
- Minimal padding for maximum grid space
|
|
- Single-column layout
|
|
- Streamlined UI
|
|
|
|
### Desktop Version Features:
|
|
- Full header with stats
|
|
- Larger grid (40-120px cells)
|
|
- More detailed UI elements
|
|
- Better spacing and padding
|
|
- Advanced features
|
|
|
|
## Testing
|
|
|
|
To test mobile version on desktop:
|
|
1. Open browser dev tools
|
|
2. Toggle device emulation
|
|
3. Refresh page - should auto-redirect to mobile.html
|
|
|
|
To force a specific version:
|
|
- Mobile: Go directly to `/mobile.html`
|
|
- Desktop: Go directly to `/index.html`
|