Unusable on Android phones for me

edited February 2012 in Enyo 1.0
I have tried to get an Enyo 1.0 TouchPad app to run on Android (2.3) phones with PhoneGap, but there are way too much problems. I wonder, how others have managed to do that. Android 3.2 and 4.0 on tablets are another story (problems too, but not that much):

Scrolling (not virtual) VERY jerky with accelerated=true.

No flick scrolling with accelerated=false (not virtual).

Checkbox state reversed (also on 4.0 emulator with phone res!).

Spinner does not display (also on 4.0 emulator with phone res!).

Selecting SlidingView does not show it (also on 4.0 emulator with phone res!).

List Selector only opens with VERY short taps.

Lightgrey vertical line near shadow of SlidingView (have disabled the shadow itself with CSS on phones, also on 4.0 emulator with phone res!).

Tested on Android 2.3/4.0 phone emulator, 3.2/4.0 tablet emulator, 3.2 Motorola Xoom, 4.0 TouchPad and 2.3.5 HTC Desire S.

On Android 3.2 and 4.0 (tablets!), remaining problems are with scrolling, but not as bad as on 2.3 phones.

The same app runs pretty well on a Pre3...


  • edited February 2012
    One more thing: I am listening to resize events to react on orientation change and if I ask my main kind for its size, I get 320x533 on a 480x800 Android phone emulator (2.3 and 4.0).

    Does Enyo 1.0 do the webOS Pre3 1.5x scaling on Android phones, too???
  • The 1.5x scaling relies on support that was only in the Pre3 version of WebKit.
  • edited February 2012
    When inspecting the HTML with Weinre, the main page on a 480x800 Android 4.0 emulator has a size of 320x508 px.

    I have configured in the Android manifest:
    I have this in my index.html:

    Any idea why I do not have 480x800 available?
  • edited February 2012
    That's because Webkit is telling you DIPs, not pixels. Pre3 doesn't tell the truth to the app, so it needs patches.

    DIP (Density Independent Pixel) is the absolute unit you must use when javascripting. So you have a 480 pixels screen with a pixel ratio of 1.5, that equals to: 480/1.5 = 320DIP.

    You should be able to rescale everything with CSS media queries, and use some javascript to some specific stuff.

    That's why I shared this.
  • Thanks, but I got the size in px from the Weinre inspector!?
  • edited February 2012
    Yeah, that's what I'm telling you.

    Javascript receives the sizes on DIPs, not Pixels. Let's say you have an iPhone screen (320x480). when you get the screen width, you get 320DIP, but as pixel ratio = 1 the physical display width is 320*1=320px.

    On a iPhone 4, you get 320 too, but as pixel ratio = 2 the physical display with is 320*2=640pixels.

    Your Android screen is physically 480x762 (800 minus the 38px occupied by the top bar) with a pixel ratio = 1.5

    What javascript exposes, again it's not pixels, but DIPs, so you get 320x508, that on physical pixels equals those 480(=320*1.5) x 762(=502*1.5).
  • edited February 2012
    If you developed for PalmOS, it should sound familiar to you. PalmOS worked too using DIPs for high resolution displays (at that time, high resolution was 320x320 or 320x480), but you always had to deal with the screen in a 160 pixel width world.
  • Yep, I understand that. But I was talking about inspecting the computed CSS of the HTML nodes in Weinre. And there it said "px".
  • edited February 2012
    No, Android 4.0 emulator in phone size (480x800).
  • I think you're missing the point of what @rafa_bernad is saying. It is because of the way that Webkit is computing the dimensions in pixels that is causing you to have a small viewport area.

    The Pre 3 does some mojo under the surface to correct these values so that elements are sized properly, whereas your Android emulator does not, thus the dimensions are not what you expect them to be.

    ( @rafa_bernad please correct me if I've missed something here - this is my layman's understanding).
  • edited February 2012
    ok @sidamos. let's do console.log(window.devicePixelRatio) My bet is it will log 1 or undefined.

    (although it could be inspector shows computed styles in DIP, dunno as I have not experimented with it yet)
  • window.devicePixelRatio = 1.5

    BTW, my app looks very similar to how it looks on the Pre3 with scaling on (default mode).
  • We are running circles here. The inspector shows, in fact, DIP. CSS 2.1 specification says that pixels are relative units, anyways, so although it's confusing, those "px" are right.
Sign In or Register to comment.