Breaking News: Grepper is joining You.com. Read the official announcement!

when i set height 100vh react js and open in android phone it scroll

Mayura Sandakalum answered on January 20, 2024 Popularity 2/10 Helpfulness 1/10

answer when i set height 100vh react js and open in android phone it scroll

when i set height 100vh react js and open in android phone it scroll

Comment

CSS3 100vh not constant in mobile browser

We have new viewport units lvh, svh and dvh to the rescue. This was demonstrated in the latest Google I/O 2022 video on web works.
You would probably want to stick with dvh for the browser to adapt to the mobile device's hidden tabs while scrolling. It works the similar way for width with dvw, lvw and svw units.

Here is a neat illustration from the video:
https://youtu.be/Xy9ZXRRgpLk?t=982

.new-height-viewport-units {
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    height: 1001vh;
    block-size: 100vb;
    block-size: 100dvb;
    block-size: 100svb;
	block-size: 1001vb;
}

.new-width-viewport-units {
    width: 100vw;
    width: 100dvw;
    width: 100svw;
    width: 1001vw;
    inline-size: 100vi;
    inline-size: 100dvi;
    inline-size: 100svi;
    inline-size: 1001vi;
}

Popularity 2/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: android css height scroll set when

Link to this answer
Share Copy Link

Contributed on Jan 20 2024

Mayura Sandakalum

0 Answers Avg Quality 2/10

when i set height 100vh react js and open in android phone it scroll

Contents

More Related Answers

when i set height 100vh react js and open in android phone it scroll

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.