Skip to content

jtaavola/dynamic-viewport-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Dynamic Viewport Demo

Some browsers have a dyanmic viewport. For example, iOS Safari hides the address bar when scrolling, affecting the viewport height. This is a well document problem when using viewport units for CSS sizing. This repo explores the available viewport sizes (v*, sv*, lv*, and dv*). Try out the demo on your phone!.

using 100vh using 100svh

This project was bootstrapped with Create React App and cra-template-styled.

Related resources

Development

npm install

Installs necessary packages.

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

About

Demo exploring CSS viewport sizes on a dynamic viewport browser

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published