0 Favourites

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.

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • 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)

    This would target any iPad and general bigger displays.

    If (ScreenWidth/devicePixelRatio <= 568)

    This would target any iPhone and smaller devices.

    My question is - haven't other people run into this problem and does my solution make even sense?

  • 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.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)