Overview
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!
Details
- Version1.0.1
- UpdatedJuly 7, 2026
- Offered byrostislavkhrenenko
- Size22.35KiB
- LanguagesEnglish (United States)
- Developer
Email
rostislavkhrenenko@gmail.com - Non-traderThis developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.
Privacy
This developer declares that your data is
- Not being sold to third parties, outside of the approved use cases
- Not being used or transferred for purposes that are unrelated to the item's core functionality
- Not being used or transferred to determine creditworthiness or for lending purposes
