skills.rest
coastdigitalgroup
coastdigitalgroupOFFICIAL
Explore all skills by this author →
GitHub

mobile-viewport-implementation

Implement mobile layouts using svh, dvh, lvh, and safe-area insets.

2|Updated Mar 21, 2026
Search Tags:#mobile#safe-area#viewport#dvh#svh#notch#lvh
One-click install
npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill mobile-viewport-implementation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-viewport-implementation
Source: https://github.com/coastdigitalgroup/coastai-skills/tree/main/website-development/mobile-viewport-implementation
Command: npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill mobile-viewport-implementation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Mobile web layouts often suffer from the 100vh problem, where the visible area changes as the browser chrome (address bar, toolbars) appears or disappears, causing content to be clipped or misaligned in app-like shells. This Skill provides a protocol for building resilient layouts that adapt to svh, dvh, and lvh and hardware safe areas using env(safe-area-inset-*) and a proper viewport meta tag.

Core Features & Use Cases

  • Robust height handling with 100dvh, 100svh, and 100lvh to ensure full-screen shells across scroll states.
  • Safe area integration using env(safe-area-inset-*) to prevent UI from being cut by notches or home indicators.
  • Viewport configuration with viewport-fit=cover and calc-based padding to maintain background continuity and content safety.
  • Use cases include app-like shells, full-height sections, sticky bottom controls above the home indicator, and overlays that avoid notches in landscape.

Quick Start

Create an app-shell layout that uses 100dvh for height, applies safe-area padding with env(safe-area-inset-*) values, and sets the viewport meta tag to viewport-fit=cover.

Frequently Asked Questions about mobile-viewport-implementation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does 100vh cause content clipping in mobile web layouts?▼

The 100vh problem occurs because mobile browser chrome dynamically appears and disappears, changing the visible viewport and clipping content. Using 100dvh, 100svh, and 100lvh units ensures layouts adapt to these scroll states.

How do I prevent UI elements from being cut off by iPhone notches and home indicators?▼

To prevent UI cutoffs from notches and home indicators, apply viewport-fit=cover in the meta tag and use env(safe-area-inset-*) with calc-based padding to position elements within safe areas.

What is the difference between svh, dvh, and lvh viewport units?▼

Viewport units svh, dvh, and lvh represent small, dynamic, and large viewport heights respectively. They handle mobile browser chrome changes differently, with dvh adapting dynamically as toolbars appear or disappear.

How do I build a sticky bottom control bar above the home indicator?▼

Build sticky bottom controls by applying env(safe-area-inset-bottom) as padding on a full-height section using 100dvh, ensuring the bar stays visible and accessible above the home indicator.

Does viewport-fit=cover work with safe-area insets for overlays?▼

Yes, viewport-fit=cover extends the webview into notch areas, allowing env(safe-area-inset-*) values to apply calc-based padding that keeps overlays visible and prevents hardware obstruction in landscape.

What is the best way to handle full-screen app-like shells on mobile browsers?▼

The best way to handle full-screen app shells is combining viewport-fit=cover, 100dvh for robust height, and env(safe-area-inset-*) padding to ensure content avoids notches and adapts to browser chrome.

Related Skills

Explore More Software Engineering Skills→
yeohj0710yeohj0710

safe-area-handling

Configure safe-area insets for Capacitor apps across iOS and Android.

Community
Advanced
CatsofsufferingCatsofsuffering
5

adapt

Adapt designs across screen sizes with responsive layouts, breakpoints, and touch targets.

Community
Intermediate
saint2706saint2706

responsive-design

Generate mobile-first responsive web designs using CSS Grid, Flexbox, and media queries.

Community
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-viewport-units

Detect 100vh clipping and retina-blurry images in web pages.

Community
Intermediate