Viewport size on Windows Phone 8

[SimonFlack]

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)

 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.