Full screen mode allows users to view your 360° product in an immersive, distraction-free environment. This feature maximizes the viewing area and creates a more engaging product experience.
How Full Screen Works
When enabled, users can click the full screen icon to expand your 360° view to fill their entire screen. This removes browser chrome, navigation elements, and other distractions, focusing attention entirely on your product.
Full Screen Features
Automatic Zoom Reset
- Zoom Reset: Automatically resets zoom level when entering full screen
- Purpose: Ensures optimal viewing experience
- Behavior: Returns to default zoom when exiting full screen
Icon Customization
- Icon Variants: Multiple full screen icon styles available
- Icon Size: Adjustable icon size for different viewer sizes
- Positioning: Icon appears in the top-right corner of the viewer
Responsive Behavior
- Automatic Adjustment: Viewer adapts to screen dimensions
- Maintains Aspect Ratio: Preserves product proportions
- Mobile Optimized: Works seamlessly on touch devices
When to Use Full Screen
Best For:
- High-End Products: Luxury items, electronics, vehicles
- Detailed Products: Jewelry, watches, technical equipment
- Immersive Experiences: Showrooms, galleries, presentations
- Mobile Viewing: Better experience on small screens
Consider Alternatives When:
- Quick Browsing: Users need fast access to other content
- Comparison Shopping: Multiple products need to be visible
- E-commerce Integration: Users need to see product details, pricing
Full Screen Icon Settings
Icon Variants
- Style A: Standard full screen icon
- Style B: Alternative design
- Style C: Minimalist approach
- Custom: Upload your own icon
Icon Size
- Small: 16px - Subtle, unobtrusive
- Medium: 24px - Balanced visibility
- Large: 32px - High visibility
- Custom: Specify exact pixel size
Technical Implementation
Browser Support
- Modern Browsers: Full support for full screen API
- Legacy Browsers: Graceful fallback to popup window
- Mobile Browsers: Native full screen support
Performance Considerations
- Memory Usage: Full screen may use more system resources
- Battery Impact: Consider mobile device battery life
- Loading Time: May take slightly longer to initialize
User Experience Guidelines
Entry Points
- Clear Icon: Make the full screen button easily discoverable
- Visual Cues: Use hover effects to indicate interactivity
- Consistent Placement: Keep icon in standard location (top-right)
Exit Options
- Escape Key: Standard keyboard shortcut
- Click Icon Again: Toggle behavior
- Browser Controls: Native full screen exit options
Mobile Considerations
Touch Interaction
- Touch-Friendly: Large enough icon for finger interaction
- Gesture Support: Works with touch gestures
- Orientation: Adapts to device rotation
Performance
- Battery Usage: Full screen may impact battery life
- Data Usage: Consider mobile data consumption
- Loading Speed: Optimize for mobile networks
Troubleshooting
Full Screen Not Working
- Check browser compatibility
- Verify full screen is enabled in settings
- Ensure user has granted necessary permissions
Icon Not Visible
- Check icon size settings
- Verify icon variant is selected
- Ensure sufficient contrast with background
Performance Issues
- Optimize image file sizes
- Reduce viewer complexity
- Check device capabilities
Mobile Issues
- Test on actual devices, not just browser dev tools
- Verify touch interaction works properly
- Check orientation handling
Best Practices
Design Considerations
- Icon Placement: Keep in top-right corner for consistency
- Size Balance: Not too small to miss, not too large to distract
- Visual Hierarchy: Ensure icon doesn’t compete with product
User Education
- Tooltips: Add helpful tooltips to explain functionality
- Instructions: Consider adding instruction messages
- Visual Cues: Use animations or effects to draw attention
Performance Optimization
- Image Quality: Balance quality with loading speed
- Frame Count: Optimize number of frames for smooth experience
- Compression: Use appropriate image compression