CODEWITHSUNDEEP
windows-phone-8
niklas-e
niklas-e

Reputation: 476

Windows Phone 8 HTML5 - window.innerWidth and window.innerHeight

I made some experiments with WP8 (Lumia 920) HTML5 app and stumbled into an interesesting behaviour. I tried to create multi-resolution handler for graphics, but it didn't quite work as intended when I assumed the resolution would be 1280x768 (WXGA, landscape orientation). After debugging I noticed that screen.width&height returned correct values, but window.innerWidth&Height returned 1024 and 614.

More info:

-The graphics DID fill the screen, even though window.innerWidth&Height values are strange (1024x614)

-WebBrowser controls Vertical and Horizontal alignment is set to "Stretch". (I did try with "Center", but it didn't work at all. I only got blank screen.)

-I tried to set my main div's width to 1280 and height to 768 with CSS. Didn't change the behaviour. Though, part of the div's contents were off the screen.

-I tried to set WebBrowser controls Width & Height properties to 1280/768

-I implemented the ResolutionHelper class which confirms that the App.Current.Host.Content.ScaleFactor is indeed matching WXGA. Well, obviously it should match, because screen.width & screen.height returns correct values... (ResolutionHelper is described here: http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206974(v=vs.105).aspx )

and finally, XAML definition for my app (I tried with and without the Grid control):

<phone:PhoneApplicationPage
    x:Class="HTML5App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Landscape" Orientation="Landscape"
    shell:SystemTray.IsVisible="False">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <phone:WebBrowser x:Name="Browser"
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch"
                      Loaded="Browser_Loaded"
                      NavigationFailed="Browser_NavigationFailed"
                      />
    </Grid>

</phone:PhoneApplicationPage>

And the HTML... (note that I did try to set my #wrapper div's width and height as 1280 / 768)

<!DOCTYPE html>
<html style="-ms-touch-action: none">
<head>
    <title>X</title>
    <style type="text/css">
        html,body {background-color: #333;color: #fff;font-family: helvetica, arial, sans-serif;margin: 0;padding: 0;font-size: 12pt;}
        #wrapper {width:100%;}
        #content {width:80%;margin:0 auto;text-align: center;}
        #content button {width:100%;height:45px;border:1px solid #fff;color:#fff;background:#000;margin-bottom:15px;}
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="content">
            <h1>My title</h1>
            <button>Btn 1</button>
            <button>Btn 2</button>
            <button>Btn 3</button>
            <button>Btn 4</button>
        </div>
    </div>
</body>
</html>

Sorry if I missed something important information here, just ask for more if needed :)

So the question is: what is the logic behind these strange window.innerWidth and window.innerHeight values?

Upvotes: 0

Views: 1201

Answers (1)

niklas-e
niklas-e

Reputation: 476

Oh well, I managed to fix the issue with CSS definition:

@-ms-viewport{height:device-height}
@-ms-viewport{width:device-width}

but added...

@viewport{height:device-height}
@viewport{width:device-width}

... just to make sure it will work. So the thing is that my phone (and probably most of the other phones) failed with viewport (visible screen area) scaling. This CSS definition makes the browser's viewport to be same size as the device's screen.

Summary: I guess the phone is not that smart after all, YYEAAAHHH! :)

Upvotes: 4

Related Questions