WebStudio Proportions Fixer

Adjusts WebStudio canvas height to realistic proportions (16:10, 3:4, 9:16) for correct vh unit rendering.

Enhance your WebStudio design workflow with WebStudio VH Proportions Fixer! When building websites in WebStudio, the default canvas editor can sometimes miscalculate viewport-based units (like "vh") because the editor's height container does not match the actual aspect ratio of target devices. This extension solves this issue by dynamically adjusting the builder's iframe height to maintain realistic, device-specific proportions. With this extension enabled, your canvas viewport height will calculate correctly, ensuring that section heights, full-screen layouts, and vh-based typography render exactly as they will on a live device. Key Features: - Dynamic Proportional Aspect Ratios: • Desktop (>991px): Forces a 16:10 viewport ratio. • Tablet (481px to 991px): Forces a 3:4 viewport ratio (iPad portrait style). • Mobile (<=480px): Forces a 9:19.5 viewport ratio (modern smartphone style). - Accurate "vh" Layouts: Prevents layout distortions and alignment issues by aligning the physical iframe dimensions with the expected device ratios. - Quick Toggle Control: A clean, lightweight popup allows you to turn the fixer on or off with a single click, immediately updating the active WebStudio editor canvas. - No Zoom/Transform Side-Effects: Simply resizes the iframe height natively without using scale, zoom, or CSS hacks, keeping your selection overlays and bounding boxes aligned perfectly. How to Use: 1. Install the extension. 2. Open any project in WebStudio. 3. Click the extension icon in your browser toolbar to verify it's enabled. 4. Preview your layouts on different breakpoints—they will now render using realistic device ratios!