1. #1
    Sencha User
    Join Date
    Jul 2011
    Location
    Utrecht
    Posts
    84
    Vote Rating
    3
    Answers
    4
    DJFliX is on a distinguished road

      0  

    Default Unanswered: Resolution invariance in Sencha Touch 2 PR2

    Unanswered: Resolution invariance in Sencha Touch 2 PR2


    I have been developing some proof of concept Sencha Touch demo's for myself, but one thing that seems to fail is the resolution independence on Android. On iOS every screen seems to scale correctly (iPhone 3G vs iPhone 4) and the screen looks the same. Everything is rendered even more beautiful than I could imagine. On Android however everything seems ugly and GUI controls become unusable on higher resolutions. When testing I use my Motorola Atrix 4G (on Android 2.3.4, 960x540 display), an Android AVD (480x320 display) and another AVD with a 800x480 display. I have attached a picture that displays the difference on the three displays.

    My questions:
    On iOS: does the browser take care of scaling/rendering correctly? Or does Sencha Touch have some Retina Magic to accomplish this?

    On Android: Is there a simple way to use some conditional CSS for rendering in a different font-size for every resolution? I tried using viewport target-densitydpi=medium-dpi, but it did not seem to make any difference (probably because sencha/phonegap creates extViewportMeta with width=device-width, initial-scale=1.0).resolution.jpg

    And is it just me or does everything webkit-related render crappily on an Android?

    Edit: 480x320 => 800x480 scaling works with this html:
    <meta name="viewport" content="initial-scale=1.0, width=320, target-densitydpi=medium-dpi "/>

    On 540x960 (both on my Atrix and Emulator with qHD) the sizes seem to be calculated as if the screen were a 480x800 screen...
    Also: I swapped values on in the picture on 320x480, sorry!

    Below are the renderings on 800x480 and 960x540. The 800x480 is identical to the 480x320 rendering on Android and the 480x320 rendering on the iPhone.

    emu960rainbow.jpgemu800rainbow.jpg

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Location
    Utrecht
    Posts
    84
    Vote Rating
    3
    Answers
    4
    DJFliX is on a distinguished road

      0  

    Default


    I have found an extremely unwanted dirty hack for the time being, but the CSS is unacceptably ugly (buttons are oddly shaped, and there seem to be gaps between elements).

    This piece of HTML will load extra CSS if the device has a device-pixel-ratio of 1.5 (this is the case on hdpi devices) AND a device-width of 360px. (540/1.5 = 360px, due to the device pixel ratio).
    Code:
    <linkrel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5) and (min-device-width: 360px) and (max-device-width: 360px)"href="css/qHD.css"/><!-- Dirty hack for Android qHD devices -->
    qHD.css contains the following:
    Code:
    body.x-android.x-phone {
    font-size: 133% !important;
    }
    The 133% is 360/1.5 = 240 and then 320 (the desired width) / 240 which is 1.333333333333.

    Does anyone have any advice on how to make the buttons prettier? I'd rather have my device return a device-pixel-ratio of 1.6875 (or 1.7)... is this possible? My last few posts resulted in no comments whatsoever, I'd appreciate people giving me some input, even if it means calling me stupid or disapproval of my ideas, it's always better than nothing! (: