PX to VH Converter

A 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?

A 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 viewport.

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 visual viewport.

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 layout viewport.

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.

The vh represents the relative height of the viewport in terms of percentage. Meaning, 1vh is equivalent to 1% of viewport height.

How to Convert vh to px?

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.

The Formula

Following the formula, we'll have:

vh = (250px / 959px) * 100
vh = (0.26) * 100
vh = 26

How to get the Viewport Height?

You can get the Viewport Height (vh) of your document by using JavaScript. The window 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.