Bug 131981 – Make VW unit accurate (computing devicePixelRatio)

• Component: CSS
• Status: RESOLVED DUPLICATE

Is there any way VW unit return a useful value I can use in IOS?

Right now it returns a value that, when used anywhere in the CSS, produces double or bigger sizes than on a desktop browser.

In order for the VW unit to work as in every screen with devicePixelRatio >1, you have to create separate rules for EACH pixelRatio! (or other css hacks)

e.j. 
To give a container a 10vw (10/100 viewport width units) that look consistent cross-browser, you have to declare separate media queries FOR EVERY existing screen resolution, making a one-liner into:

/* 2 dpr */
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi){ 
    #flex_conteiner {
        font-size: 5vw; /* actual size = 1/2 */
    }
}

/* 1.25 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    #flex_conteiner {
        font-size: 8vw; /* actual size = 1/1.25 */
    }
}

/* 1.3 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 
   #flex_conteiner {
        font-size: 7.692vw; /* actual size = 1/1.3 */
    }
}}

/* 1.5 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    #flex_conteiner {
        font-size: 6.666vw; /* actual size = 1/1.5 */
    }
}}

if VW units returned the actual useful number we are required to enter to cheat webkit (we tell iPhones 320px and they show 640px), then we wouldn't need to counter-act every rule coming from its own engine (the viewport width returned)

In short: If the devicePixelRatio is 2, I want 100vw to return 320, not 640.

Thanks.

[Brent Fulgham]

@Sam: Is this superseded by any other units work?

[Sam Sneddon [:gsnedders]]

Dupe of bug 135254 I think, but this was also fixed by iOS Safari moving to WK2.

*** This bug has been marked as a duplicate of bug 135254 ***