Scaling with devicePixelRatio

Hi all,

So this is something that's bothered me for a while.

If I'm trying to create a cross-platform scaling solution, I really want it to take into account pixel density. If everything is scaled up uniformly that isn't a problem, but usually you wouldn't want the button size on mobile to scale up proportionally on larger displays.

Ideally I'd be able to do this:

Width * (96/PPI)

Or something similar so that the real-world size of the width was consistent across devices with different pixel densities.

Has anyone looked at this before?

Can't different screens have the same size, and have different ppi?

Also, how would you get the ppi?

Isn't that you are looking?

http://flamma-beta.com/HTML5/zoompng/

Click anywhere to switch zoom in/out.

Top left, original resolution.

Top right, 8 bit PNG high resolution.

Pink, 16 bit PNG high resolution.

Hi all,

This is something I'm consistently struggling with still.

The problem lies in WindowWidth/WindowHeight/ScreenWidth/ScreenHeight

For example, how do I differentiate between an iPad 1 and iPhone 5? The pixel width of an iPhone 5 is greater than iPad, so there is no correspondence to physical size.

I can implement devicePixelRatio into an expression as a plugin. Then I could use the following:

If (ScreenWidth/devicePixelRatio >= 1024)

If (ScreenWidth/devicePixelRatio <= 568)

the HTML5 export includes some scaling detecting the OS and browser in its META tags, but I assume you're talking about all platforms, right?

ViewPort doesn't help?

Lastly, isn't there something about detecting in what kind of OS the app is running? That'd be a nice suggestion to pitch.

ghost yeah this is across all platforms without any sort of OS detection.

There's lots of OS detection stuff already, but that wouldn't account for, say, a retina Macbook. My solution would/should?

IDK...

Have you asked the Ubi guys?

or Ashley?

I don't think the Ubi guys will have run into this issue yet, but I've popped Ashley an email.

Would it solve this to expose devicePixelRatio through the Browser plugin?

Ashley yep it would! I was wondering whether this would be the right approach though - it concerns me that others haven't run into the same issue?

My experience with the problem when working with raw HTML was that browsers didn't report the true PPI of the screen resolution. When i always checked the test cases from tablets ranging from 7 to 11 inches, ipod touch 3.5, ipad2. all reported a desktop PPI for a 14" monitor.

Now I can't speak for the browsers right now, but that was the situation two years ago. If the browsers still don't provide true PPI then I don't see an easy fix. So I hope it is fixes.

The alternative is to use the common model of testing the browser/os/hardware check and then reporting from a table with the info.

I've added a DevicePixelRatio expression for the next build. But I'm not sure you really need to take it in to account for display. Usually letterbox scale just takes care of everything. For example, an iPad 3 (2048x1536) has twice the screen width and height of the iPad 2 (1024x768) in the same space, i.e. double the pixel density. But letterbox scale just stretches to fill and everything appears at exactly the same size. So there's no need to take in to account PPI for that.

in the future case someone googles for something like this for browsers:

"dpi.lv - Easily find the DPI/PPI of any (browser) screen":

http://dpi.lv/

https://github.com/LeaVerou/dpi

Ashley that's brilliant, thanks very much. Scaling itself is fine, it's more that certain elements need to be adjusted on smaller/larger displays.

For example on a mobile screen, our circular buttons need to be slightly larger than the thumb. When that scales up uniformly onto the iPad they become far too big.

Using this expression I can make adjustments that work across all Android, iOS devices and even retina monitors on laptops etc.

E.g.

iPad

iPad 1

ScreenWidth / devicePixelRatio == 1024

1024 / 1 = 1024

iPad 2

ScreenWidth / devicePixelRatio == 1024

1024 / 1 = 1024

iPad 3

ScreenWidth / devicePixelRatio == 1024

2048 / 2 = 1024

iPad 4

ScreenWidth / devicePixelRatio == 1024

2048 / 2 = 1024

iPad Mini

ScreenWidth / devicePixelRatio == 1024

2048 / 2 = 1024

iPhone

iPhone 1

ScreenWidth / devicePixelRatio == 320

320 / 1 = 320

iPhone 3G

ScreenWidth / devicePixelRatio == 320

320 / 1 = 320

iPhone 3GS

ScreenWidth / devicePixelRatio == 320

320 / 1 = 320

iPhone 4

ScreenWidth / devicePixelRatio == 320

640 / 2 = 320

iPhone 4S

ScreenWidth / devicePixelRatio == 320

640 / 2 = 320

iPhone 5

ScreenWidth / devicePixelRatio == 320

640 / 2 = 320

iPhone 5C

ScreenWidth / devicePixelRatio == 320

640 / 2 = 320

iPhone 5S

ScreenWidth / devicePixelRatio == 320

640 / 2 = 320

I am just using "Is Mobile" to scale the sprite bigger. Haven't tested it yet though. I suppose I should worry about that more.