Results 1 to 5 of 5

Thread: Viewport size on Windows Phone 8

  1. #1
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    242

    Default Viewport size on Windows Phone 8

    Long time... but now I am back :-)

    I have a customer that wants to port this existing ST app to WP8.

    http://wfx.no/dipsforum

    or

    http://wfx.no/dipsforum/?platform=ie10

    Screen Shot 2013-05-15 at 10.47.49 PM.png

    Our test device is a Lumia 920 with a 15:9 screen ratio.

    A screenshot from the phone looks like this.

    lumia.jpg

    As you can see the tabbar is cut on the 4th icon. In order to reproduce this look in Safari (I develop on a mac) I have to set the browser size to:

    self.resizeTo(332,580)

    This gives me a resonable area to simulate the layout. And looks like this.

    Screen Shot 2013-05-15 at 10.34.05 PM.png

    On a quick look it seems the viewport is defined as 320 x 560 (Pretty close to my browser size)

    Code:
     if (!Ext.microloaded && navigator.userAgent.match(/IEMobile\/10\.0/)) {
                    var msViewportStyle = document.createElement("style");
                    msViewportStyle.appendChild(
                        document.createTextNode(
                            "@media screen and (orientation: portrait) {" +
                                "@-ms-viewport {width: 320px !important;}" +
                            "}" +
                            "@media screen and (orientation: landscape) {" +
                                "@-ms-viewport {width: 560px !important;}" +
                            "}"
                        )
                    );
                    head.appendChild(msViewportStyle);
                }

    So... My Question...

    Is this correct? And if so why is there only room for 3.5 icons on the tabbar/appbar when windows design guides say there should be room for 4 icons.

    Note: Setting Safari to --> self.resizeTo(480,800) gives a more "correct" / "expected" layout. (Actual screen size on the phone)

    Screen Shot 2013-05-15 at 10.39.06 PM.png

    Am I doing something wrong?

    Any help appreciated.
    Last edited by SimonFlack; 15 May 2013 at 1:18 PM. Reason: added link to test app
    Simon Flack
    CEO and UX Designer
    WhiteFox AS, Norway

    Web: www.whitefox.no

    Facebook: www.facebook.com/WhiteFoxAS

    Twitter: @WhiteFoxAS

  2. #2
    Sencha User
    Join Date
    Dec 2012
    Posts
    8

    Default Sencha Touch 2 on Window phone 8

    I have developed an app for iOs and Android with Sencha Touch. Now i want bring these app to Windows Phone 8.

    I migrated the framework to 2.2 and all works fine. In the internet explorer 10 on Windows 8 the app works great. But when i try to open the app on the emulator of windows phone 8 it doesn't word.
    Windows Phone 8 shows cordova screen and then blue screen.

    Plz ....help me!

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Location
    Trivandrum
    Posts
    13

    Default I am also facing the same issue.

    Can anyone help me on this..
    Quote Originally Posted by ttphat View Post
    I have developed an app for iOs and Android with Sencha Touch. Now i want bring these app to Windows Phone 8.

    I migrated the framework to 2.2 and all works fine. In the internet explorer 10 on Windows 8 the app works great. But when i try to open the app on the emulator of windows phone 8 it doesn't word.
    Windows Phone 8 shows cordova screen and then blue screen.

    Plz ....help me!

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    206

    Default

    I'm struggling with the same. Using cordova, I can't get a sencha app to initialise, though the cordova framework itself is initialising. Does anyone have any direction how to make this run?

    Allister

  5. #5

    Default

    Hi! did you find a solution? I have the same problem... Help!!! :-)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •