How can I convert px to vw in JavaScript?

Question

I want to convert px to vw in JavaScript, how can I do it?

I've been looking for it, but I haven't found anything.

So,

1px → ? vw

Thanks.

[Just get the width of your screen in JS](http://tripleodeon.com/2011/12/first-understand-your-screen) they said. gl;hf — FelipeAls, Feb 03 '15 at 10:20
@errand, I have a use-case for this. I'm positioning text fields over an image that may be printed fully wide in portrait or landscape and exactly matches what is seen on screen. Works great until draggable converts field positions from viewport percentages into pixels. — phatfingers, Jan 10 '19 at 22:48

Fabrizio Calderan · Accepted Answer · 2020-07-27T04:38:19.680

46

1px = (100vw / [document.documentElement.clientWidth] px)

e.g. — If your viewport was 500px wide (equals by definition to 100vw) then

1px = (100vw / 500px) = 0.2vw

I used .clientWidth to exclude any scrollbar from computation

edited Jul 27 '20 at 04:38

answered Feb 03 '15 at 09:13

Fabrizio Calderan

120,726
26
164
177

Note that .clientWidth is a property, not a method. – enguerranws Feb 03 '15 at 09:24
right, thank you for your note. :) (need a second morning coffee) – Fabrizio Calderan Feb 03 '15 at 09:25
2

Why did you exclude the scrollbar? I have observed that 100vw **includes the scrollbar** if one appears. So `window.innerWidth` has been giving me accurate conversions between px and vw. But document.documentElement.clientWidth has not. Tried on Windows Chrome and Firefox, Mac Chrome and Safari. – Bob Stein Dec 06 '20 at 22:54

score 16 · Answer 2 · answered Nov 24 '20 at 09:12

The formula goes like this

px in vw:

100 * px / windowWidth

px in vh:

100 * px / windowHeight

vh in px:

windowHeight * vh / 100

vw in px:

windowWidth * vw / 100

Some code for inspiration: (I'm a JS noob though)

function viewport_convert(px = 0, vw = 0, vh = 0){
    if(px != 0){
        if(vw){
            return (100 * px / window.innerWidth);
        } else {
            return (100 * px / window.innerHeight);
        }
    } else if(vw != 0 && vh != 0){
        var w_h_arr = [];
        w_h_arr["width"] = Math.ceil((window.innerWidth * vw / 100));
        w_h_arr["height"] = Math.ceil((window.innerHeight * vh / 100));
        return w_h_arr;
    } else if(vw != 0){
        return Math.ceil((window.innerWidth * vw / 100));
    } else if(vh != 0){
        return Math.ceil((window.innerHeight * vh / 100));
    }
}

enguerranws · Answer 3 · 2015-02-03T09:33:45.940

As 1vw / 1vh represents 1/100th of the viewport width / height, you could achieve this using something like :

var newWidth = yourElement.outerwidth / document.documentElement.clientWidth *100;
yourElement.style.width = newWidth +'vw';

I thought about use a Math.round() to get clean number, but you'll surely get wrong dimensions if you exclude decimals.

Can't you change this values directly in CSS (e.g. with another stylesheet) ? It seems really dirty to convert it via Javascript.

Also, according to Errand's comment, if you simply convert your px to vw/vh, it won't make your current HTML/CSS magically fit in the screen.