PX to VH Converter
Viewport Height, some refers to as
view height and even
commonly shortened to just
vh, is a web design and development term associated with the
CSS Units. While pixel is a fixed measurement, the viewport height is relative to the device screen's viewing
size. Use this
px to vh for your quick conversion.
What is a Viewport?
viewport is an area of your browser which is currently being rendered and viewed.
If you opened this webpage on your desktop browser, chances are, you are in full screen. Your viewport is
essentially the size of this opened browser window. In case you are on mobile, the entire screen is your
What bothers with some web developers and designers are the two common types of viewports - visual and layout viewport.
The visual viewport is the part of the webpage that is currently visible to the user. If the user zoom-in the page, the texts, images or html elements become bigger, the affected part of this is the visual viewport. It is because, you still have to scroll horizontally to see the rest of the zoomed page. Meaning, there's no change to the original orientation or size of the browser window.
Meanwhile, the layout viewport remains the same whether the page is zoomed or not. You know that there's a change on layout viewport when the media queries take effect like you will be switching from desktop view to mobile view. Your page are rendered differently on smaller screens. These are the things you know that there are changes on your layout viewport.
On desktop or laptop, when you zoom-in or zoom-out of the webpage on a browser, what typically changes is the viewport layout. Try zooming in this page, when it hits the viewport to render the mobile view, the layout will change. However, if you are using a phone or tablet, when you pinch zoom this page, the only thing that's changing is the visual viewport because it doesn't alter the orientation or dimensions of the page unlike on computer browsers.
There's a simple reference to this, the viewport is compared to a large horizontal painting with a huge frame.
The frame is like the browser while the painting itself is the
layout viewport. As you
walk along to see the rest of the painting, what's currently visible to you is the
To know more about the difference between visual and layout viewports, you can check this demo.
When talking about viewports, generally it is being referenced to
What is a Viewport Height?
The viewport height is the entire height of your document. However, if there's a border, margins or scrollbar, these are not included. Also, the chrome which contains the bookmark items, search bar, tabs or browser toolbars are not included.
vh represents the relative height of the viewport in terms of percentage.
1vh is equivalent to
1% of viewport height.
How to Convert
Since you are dealing with a css unit that is relative to the height of the viewport, the first thing you need
is the viewport height in terms of pixels. For example, your viewport right now might be
1920px x 959px. This
means that the current height of your viewport is 959px.
Given you have the pixels you want to convert to vh, say for example you want to convert 250px element height (could be a div, image, or iframe) against 959px viewport height, just divide the pixels by the viewport height then multiply by 100.
vh = (pixels / viewport height) * 100
Following the formula, we'll have:
vh = (250px / 959px) * 100
vh = (0.26) * 100
vh = 26
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.
Here are common viewports on popular devices against common ad sizes.
|iPhone 12 Pro
|iPad Pro 12 Pro
|Samsung Galaxy S9+