Device Frame

The Device Frame is a physical hardware overlay that provides visual context and critical layout boundaries for your web applications. By wrapping the viewport in a technically accurate bezel, Emuluxe ensures that designers and developers can see exactly how content interacts with hardware "dead zones."

The SVG Frame Registry

Emuluxe uses a proprietary SVG Frame Registry to render hardware. Unlike bitmap images, these frames are vector-based and infinitely scalable, ensuring they look sharp on any display.

1. Bezel Geometry & Corner Radius

Modern mobile devices are rarely simple rectangles. Emuluxe simulates:

• Hardware-Level Corner Masking: Using a clip-path synchronized with the frame's SVG path to ensure your site's corners are accurately obscured by the physical device frame.
• Bezel Depth: Multi-layered SVG strokes that mimic the "matte" or "gloss" finish of premium hardware.

2. The Isolation Layer

The device frame is rendered on a separate z-index layer above the viewport. This provides two key benefits:

• Zero CSS Pollution: The frame uses shadow-DOM encapsulation, so it never inherits your site's CSS or interferes with your global styles.
• Physical Bounds Testing: You can verify if "fixed" elements (like FABs or bottom navigation) are too close to the device's rounded corners or the software home indicator.

Specialized Hardware Overlays

Notches, Islands, and Cutouts

Emuluxe provides pixel-perfect simulation for:

• The Dynamic Island: An interactive hardware/software hybrid overlay for iPhone 14 Pro onwards.
• Standard Notches: Accurate widths and depths for legacy iPhone and Android devices.
• Punch-Hole Cameras: Circular or pill-shaped cutouts that can overlap your header content.

Virtual Home Indicators

For home-buttonless devices, Emuluxe renders the Software Home Bar. This ensures you can audit if your site's footer content is being obscured by the OS-level gesture indicators.

Customization

You can control the frame behavior in the Display Settings:

• Frame Toggle: Disable the frame for an edge-to-edge "Clean View" during deep debugging.
• Color Finishes: On supported Pro devices, switch between different hardware colors (e.g., Titanium, Midnight, or Starlight).
• Scale to Fit: Automatically scale the device frame to fit your browser window while maintaining the internal pixel density.

Hardware Aesthetics & State

A high-fidelity simulation isn't just about the screen; it's about the physical identity of the device. Emuluxe allows you to customize and audit hardware-specific states:

Frame Customization

For Pro users, the Frame Color can be adjusted to match specific device finishes (e.g., Titanium, Midnight, or Silver). This ensures that your application looks premium when showcased in the simulator or captured for marketing materials.

Battery Simulation

The Battery Engine allows you to test how your application responds to different energy states using the navigator.getBattery() API.

• Sync with Real Battery: Pulls the current battery status from your host laptop for adaptive testing.
• Battery Level: Manually sets the reported percentage (e.g., 20% to test "Low Power Mode" prompts).
• Charging State: Toggles whether the device reports as charging or on battery power.
• Percentage Visibility: Option to show or hide the percentage text inside the icon (simulating iOS 16+ behaviors).

[!TIP] Use the Device Switcher to see how different frames affect your layout's safe areas.

Next, learn how to audit Biometrics within these virtual frames.