Question

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

更多信息：

- 图形DID填满了屏幕，即使window.innerWidth＆amp; Height值很奇怪（1024x614）

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

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

- 我试图设置WebBrowser控件Width＆amp;高度属性为1280/768

-I实现了ResolutionHelper类，它确认App.Current.Host.Content.ScaleFactor确实与WXGA匹配。好吧，显然它应该匹配，因为screen.width＆amp; 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值背后的逻辑是什么？

Answer 1

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

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

但又添加了......

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

...只是为了确保它能够正常工作。所以事实是我的手机（可能大多数其他手机）都失败了视口（可见屏幕区域）缩放。此CSS定义使浏览器的视口大小与设备的屏幕大小相同。

总结：我猜电话毕竟不是那么聪明，YYEAAAHHH！：）

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

1 个答案: