Windows Phone 8 HTML5 - window.innerWidth和window.innerHeight
我用WP8 (Lumia 920) HTML5应用程序做了一些实验，无意中发现了一种有趣的行为。我试图为图形创建多分辨率处理程序，但当我假设分辨率为1280x768 (WXGA，景观定向)时，它并没有完全按照我的预期工作。调试后，我注意到screen.width&height返回了正确的值，但window.innerWidth&Height返回了1024和614。
更多信息：
-The图形确实充满了屏幕，尽管window.innerWidth&Height值很奇怪(1024x614)
-WebBrowser控制垂直和水平对齐设置为“拉伸”。(我确实试过用"Center"，但它根本不管用。(我只有空白屏幕。)
-I尝试用CSS将主div的宽度设置为1280，高度设置为768。并没有改变这种行为。不过，div的部分内容已经不在屏幕上了。
-I尝试将WebBrowser控件的宽度和高度属性设置为1280/768
-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定义(我尝试过使用或不使用Grid控件)：
<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..。(请注意，我确实尝试将我的#包装器div的宽度和高度设置为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>对不起，如果我错过了一些重要的信息，如果需要的话，只需索取更多:)
所以问题是:这些奇怪的window.innerWidth和window.innerHeight值背后的逻辑是什么？
回答 1
Stack Overflow用户
发布于 2013-10-19 07:36:38
哦，好吧，我设法解决了CSS定义的问题：
@-ms-viewport{height:device-height}
@-ms-viewport{width:device-width}但补充说..。
@viewport{height:device-height}
@viewport{width:device-width}..。只是为了确保它能起作用。所以问题是，我的手机(可能还有其他大多数手机)在视窗(可见屏幕区域)缩放时失败了。这个CSS定义使浏览器的视口与设备的屏幕大小相同。
总结性:我想手机毕竟没那么聪明，YYEAAAHHH！:)
https://stackoverflow.com/questions/19446521
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号