Bug 131981 - Make VW unit accurate (computing devicePixelRatio)
Summary: Make VW unit accurate (computing devicePixelRatio)
Status: RESOLVED DUPLICATE of bug 135254
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: iPhone / iPad iOS 7.0
: P2 Normal
Assignee: Nobody
URL: http://socialblogsitewebdesign.com
Keywords:
Depends on:
Blocks:
 
Reported: 2014-04-22 03:00 PDT by cuentanumerouno
Modified: 2022-07-14 10:18 PDT (History)
2 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description cuentanumerouno 2014-04-22 03:00:20 PDT
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.
Comment 1 Brent Fulgham 2022-07-13 17:34:09 PDT
@Sam: Is this superseded by any other units work?
Comment 2 Sam Sneddon [:gsnedders] 2022-07-14 10:18:39 PDT
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 ***