VH to PX Converter
The Viewport Height with a unit of
vh, is a common css measurement unit.
While pixels (px), is a fixed unit that is equal to 1 dot of your screen,
relative to the visible area of your screen technically referred to as viewport. Use this converter to convert
vh to px efficiently.
What is a Viewport Height?
A more in-depth discussion about the viewport height can found on the article section of PX to VH Converter. To summarize it, whatever is viewable on your window screen if you are using a desktop or laptop, or the screen area of your cellphone or tablet is referred to as "viewport". There's an exact viewport measurement on each device screen which can be found on manufacturing details of the phone.
How to Compute the Viewport Height to Pixels?
1px represents a fixed
1 dot measurement of your
viewing screen. A
1vh represents a
1% of your viewport height.
So, how do I actually convert
The first thing you need to get is the exact viewport height you are referring to. This is probably the height
of the user's current desktop or laptop viewport, cellphone or table. Just for example, let's say, the device's
430px x 932px which is the viewport of Apple iPhone 14 Pro Max. That
leaves as a 932px viewport height.
Given that you have an actual
vh measurement you want to convert to pixels, and let's
assume it is
50vh. Just divide the reference
100, then multiply the result by your
VH to PX Formula
px = (viewport height / 100) * vh
Based on the formula, our example data on vh to px conversion would look like this:
px = (935px / 100) * vh
px = 9.35 * 50
px = 467.5
Explanation: The first thing we did was divide the
viewport height by
100. Why is that?
It is because 100 represents the full 100% height of the viewport. Hence, if we divide 935px by 100, we know that 9.35px is equivalent to 1% of the viewport height (where 935px is the 100%). Note that 1vh is equal to 1% of viewport height.
Finally, to get the result, we just multiply 50vh to 9.35 to get the pixels equivalent which is 467.5px. This means that when the device's viewport height is 935px, if you use 50vh as measurement, the equivalent value of that to pixels is 467.5px.
How to get the Viewport Height?
object has an attribute called
innerHeight. You can call like this
window.innerHeight, which will return you the
vh in pixels.
What is the Usage of Viewport Height?
There are two use cases that I thought of when it comes to using
- The first one is I want to make the footer stick at the bottom and header stick at the top of the full screen even when there's a blank page. I can achieve that by using calc(100vh - footerpx - headerpx).
Here are common viewport equivalents of popular devices against common vh sizes.
|iPhone 12 Pro
|iPad Pro 12 Pro
|Samsung Galaxy S9+