1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    73
    Vote Rating
    1
    Answers
    2
    elad101 is on a distinguished road

      0  

    Default Unanswered: sencha touch 2.0.1.1 stanalone layout in iPhone5

    Unanswered: sencha touch 2.0.1.1 stanalone layout in iPhone5


    Hi,

    I develope an app using ST 2.0.1.1 and it works fine.
    When I run it on safari via iPhone5 it's working great,
    BUT when I've added the app to home screen I got the whole screen with the iPhone4 resolution.
    Is there any way except for upgrading to ST 2.1 RC2 to fix this issue?

    Thanks a lot in advance.

  2. #2
    Sencha User
    Join Date
    Feb 2012
    Posts
    73
    Vote Rating
    1
    Answers
    2
    elad101 is on a distinguished road

      0  

    Default


    Any ideas?

  3. #3
    Sencha User dyadcom's Avatar
    Join Date
    Nov 2012
    Location
    Philadelphia
    Posts
    1
    Vote Rating
    0
    dyadcom is on a distinguished road

      0  

    Default Remove "width=device-width" from Viewport meta tag

    Remove "width=device-width" from Viewport meta tag


    Looks like Apple is trying to safeguard for webapps that may not be compatible with the taller format. So you'll see there's a black bar above and below the site when viewed from homescreen to keep the proportion of the old iPhone. Not a bad idea, but definitely not ideal for those of us who want to take over the whole screen!

    As it outlines here, certain properties in the "viewport" meta tag will cause the not-fullscreen to happen. Mainly it's the "width=device-width" that keeps the viewport from properly formatting itself. You just need to remove that property from the "viewport" meta tag.

    BUT this is something Sencha adds. So the only real way to remove it is to take it out of the sencha-touch-all.js file.

    In the later versions of Sencha it looks like this:
    Code:
    ("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");
    Just run a search for "device-width" and you'll find it.

    Delete "width=device-width,"-- the rest can stay.
    Code:
    ("viewport","initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");
    I normally don't like touching the Sencha file, but there doesn't seem to be any negative effects on the iPhone 4 screens.

    Keep in mind, you'll have to re-save to the homescreen to see the change.

    This temporary fix worked for me! Maybe down the line Apple/Sencha will adjust things...

  4. #4
    Sencha User
    Join Date
    Sep 2008
    Posts
    16
    Vote Rating
    0
    la_ka is on a distinguished road

      0  

    Default


    Hi, I checked sencha touch 2.1, they use this code

    if (navigator.standalone) {
    addMeta('viewport', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0');
    }
    else {
    addMeta('viewport', 'initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0');
    }

    It seems it is not problem about device-width, maybe user-scalable. Not sure.

Thread Participants: 2

Tags for this Thread