我做了一些與WP8（Lumia 920）HTML5應用程序的實驗，並偶然發現了一個相互影響的行爲。我試圖爲圖形創建多分辨率處理程序，但當我假定分辨率爲1280x768（WXGA，橫向）時，它並沒有像預期的那樣工作。調試後，我注意到，screen.width &高度返回正確的價值觀，但window.innerWidth &身高回到1024和614Windows Phone 8 HTML5 - window.innerWidth和window.innerHeight
更多信息：
-The圖形DID佔滿整個屏幕，即使window.innerWidth &高度值是怪（1024x614）
-WebBrowser控制垂直和水平對齊方式設置爲「拉伸」。 （我曾嘗試使用「中心」，但它根本沒有工作，我只有空白屏幕）。
- 我試圖設置我的主div的寬度爲1280和高度爲768與CSS。沒有改變行爲。雖然，div的內容的一部分在屏幕之外。
-I試圖設置web瀏覽器控制寬度& Height屬性到768分之1280
-I實施ResolutionHelper類確認App.Current.Host.Content.ScaleFactor確實匹配WXGA。嗯，很明顯它應該匹配，因爲screen.width & screen.height返回正確的值...（ResolutionHelper這裏描述：http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj206974(v=vs.105).aspx）
，最後，我的應用程序XAML定義（我試過有和無網格控制）：
<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>
和HTML ...（請注意，我也嘗試設置我#wrapper指定div的寬度和高度768分之1280）
<!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>
很抱歉，如果我錯過了一些重要的信息在這裏，只是要求更多如果需要的話:)
所以，問題是：什麼是背後的這些奇怪的window.innerWidth和window.innerHeight值邏輯？