title: Windows Phone 8 HTML5 - window.innerWidth and window.innerHeight
body: <p>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&amp;height returned correct values, but window.innerWidth&amp;Height returned 1024 and 614. </p>
  
  <p>More info:</p>
  
  <p>-The graphics DID fill the screen, even though window.innerWidth&amp;Height values are strange (1024x614)</p>
  
  <p>-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.)</p>
  
  <p>-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.</p>
  
  <p>-I tried to set WebBrowser controls Width &amp; Height properties to 1280/768</p>
  
  <p>-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 &amp; screen.height returns correct values... (ResolutionHelper is described here: <a href="http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206974(v=vs.105).aspx" rel="nofollow">http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206974(v=vs.105).aspx</a> )</p>
  
  <p>and finally, XAML definition for my app (I tried with and without the Grid control):</p>
  
  <pre><code>&lt;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"&gt;
  
      &lt;Grid x:Name="LayoutRoot" Background="Transparent"&gt;
          &lt;phone:WebBrowser x:Name="Browser"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Loaded="Browser_Loaded"
                        NavigationFailed="Browser_NavigationFailed"
                        /&gt;
      &lt;/Grid&gt;
  
  &lt;/phone:PhoneApplicationPage&gt;
  </code></pre>
  
  <p>And the HTML... (note that I did try to set my #wrapper div's width and height as 1280 / 768)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html style="-ms-touch-action: none"&gt;
  &lt;head&gt;
      &lt;title&gt;X&lt;/title&gt;
      &lt;style type="text/css"&gt;
          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;}
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;div id="content"&gt;
              &lt;h1&gt;My title&lt;/h1&gt;
              &lt;button&gt;Btn 1&lt;/button&gt;
              &lt;button&gt;Btn 2&lt;/button&gt;
              &lt;button&gt;Btn 3&lt;/button&gt;
              &lt;button&gt;Btn 4&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Sorry if I missed something important information here, just ask for more if needed :)</p>
  
  <p>So the question is: what is the logic behind these strange window.innerWidth and window.innerHeight values?</p>