0

我用 WP8 (Lumia 920) HTML5 应用程序做了一些实验，偶然发现了一个有趣的行为。我尝试为图形创建多分辨率处理程序，但当我假设分辨率为 1280x768（WXGA，横向）时，它并没有按预期工作。调试后我注意到 screen.width&height 返回了正确的值，但是 window.innerWidth&Height 返回了 1024 和 614。

更多信息：

- 图形 DID 填满屏幕，即使 window.innerWidth&Height 值很奇怪 (1024x614)

-WebBrowser 控件垂直和水平对齐设置为“拉伸”。（我确实尝试过使用“Center”，但它根本不起作用。我只有空白屏幕。）

-我尝试使用 CSS 将主 div 的宽度设置为 1280，将高度设置为 768。没有改变行为。虽然，部分 div 的内容不在屏幕上。

-我尝试将 WebBrowser 控件的宽度和高度属性设置为 1280/768

-我实现了 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 ...（请注意，我确实尝试将我的#wrapper 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 值背后的逻辑是什么？

4

1 回答 1

4

哦，好吧，我设法解决了 CSS 定义的问题：

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

但补充说...

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

...只是为了确保它会起作用。所以问题是我的手机（可能还有其他大多数手机）在视口（可见屏幕区域）缩放方面失败了。这个 CSS 定义使浏览器的视口与设备的屏幕大小相同。

总结：我猜手机毕竟没有那么智能，YYEAAAHHH！:)

于 2013-10-19T07:36:38.793 回答