Easily fix min-h-screen issues on mobile browsers. Generate custom CSS, Tailwind utility classes, and JS fallbacks for consistent mobile viewport height (100dvh).
AI Generation Prompt
Technical Specification: Mobile Viewport Height Fix Generator
Overview
This is a browser-based, client-side utility designed to help developers resolve the common '100vh' layout jumping and clipping issue on mobile browsers. It generates production-ready CSS snippets, Tailwind-compatible utility classes, and JS polyfills to normalize viewport height.
Core Features
- Live Config Generator: Select target browser support levels (Modern only vs. Legacy fallback).
- Tailwind Utility Output: Provides custom
tailwind.config.jsextensions or arbitrary value classes (e.g.,min-h-[100dvh]). - CSS Snippet Generator: Creates standard CSS classes using
@supportsqueries for maximum browser compatibility. - JS Polyfill Helper: Generates a lightweight script snippet to handle the 'window.innerHeight' calculation as a fallback for prehistoric browsers.
- Visual Preview: A simulated 'Mobile Frame' showing how the content behaves with standard vs. fixed heights.
- Zero-Storage Logic: All processing is done in-memory via JavaScript. No session or local storage is used.
UI Layout
- Header: A clean, professional title with a description.
- Configuration Panel: A split-screen input area. Left side: Select 'Method' (dvh, svh, or JS-variable). Right side: Select 'Compatibility Mode' (Modern, Progressive Enhancement, or Legacy).
- Output Section: A vertical stack of code blocks (CSS, JS, Tailwind Config) with a 'Copy to Clipboard' button on each.
- Preview Area: A central 'Mobile Phone' container that dynamically updates its style based on the selected method to show the difference between standard
100vhand the chosen fix.
Aesthetic & Style
- Color Palette:
- Primary:
#3B82F6(Blue) for buttons/primary actions. - Background:
#F8FAFC(Light Gray/White). - Text:
#1E293B(Dark Slate) for readability. - Code Background:
#0F172A(Deep Navy). - Success:
#10B981(Emerald) for feedback animations.
- Primary:
- Animations: Subtle
fadeInandslideDowntransitions when code blocks are generated. Smooth button hover scaling (1.02x).
Directives for Implementation
- Vanilla JS Only: No external dependencies. Use standard DOM manipulation.
- State Management: All application state (user choices) must be held in a simple JavaScript object. Do not use
localStorage. - Responsive Design: Use Flexbox/Grid for the layout. The sidebar configurations must stack on mobile screens (viewport < 768px).
- Security: All injected code blocks should be treated as text content (use
.textContentto prevent XSS-like rendering issues). - No External Branding: Ensure no fictional brand names are present. The UI must remain purely functional.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
Why does Tailwind's min-h-screen cause layout issues on mobile Safari?
The CSS '100vh' unit represents the initial viewport height excluding the dynamic toolbars of mobile browsers like Safari or Chrome. As users scroll, the URL bar or bottom navigation bar often expands or retracts, causing the '100vh' calculation to be inaccurate. This often results in the bottom of your content being hidden or unnecessary overflow scrolling being introduced. To combat this, modern CSS introduced new viewport units like 'dvh' (dynamic viewport height), 'svh' (small viewport height), and 'lvh' (large viewport height). This tool helps you implement these modern standards easily, ensuring your layouts remain perfectly aligned regardless of the mobile browser interface state.
How do I choose between dvh, svh, and lvh for my Tailwind project?
The 'dvh' unit is generally the best choice for a 'min-h-screen' replacement because it dynamically adjusts based on the browser's current UI state. It provides the most consistent experience for full-screen applications where you want the element to fill the available space exactly without getting cut off by the browser's address bar. 'svh' represents the viewport height when browser UI elements are fully expanded, while 'lvh' represents the height when they are retracted. Using 'dvh' provides a smooth, responsive transition, but some older browsers may not support these units, which is why our tool also generates a JavaScript fallback or a feature-query based CSS fallback.
Is this tool safe for sensitive web development projects?
Yes, this tool operates entirely on the client side using pure HTML, CSS, and Vanilla JavaScript. We do not use databases, server-side processing, or tracking cookies to handle your input, meaning no code or sensitive project details are ever sent to a remote server or stored in a persistent database. Because this application runs entirely within your browser's local sandbox, it is completely secure. It does not utilize local storage or cookies, ensuring that your development workflow remains private and compliant with data protection standards while you generate the necessary CSS snippets for your Tailwind projects.
Does this tool work with legacy mobile browsers?
While modern mobile browsers (iOS 15.4+, Chrome 108+) support dynamic viewport units like 'dvh', very old browser versions do not recognize these units and will likely ignore them. This tool provides a robust 'fallthrough' strategy by generating CSS @supports rules that allow you to specify a standard '100vh' for older browsers while applying the superior '100dvh' for modern ones. For extreme compatibility requirements, we also include a small JavaScript utility that calculates the inner window height and applies it as a CSS variable (e.g., --vh). This ensures that even the oldest mobile devices will render your layout correctly, giving you complete peace of mind across your entire user base.
