1

如何在 Windows 8 Metro 应用程序中获取窗口的尺寸？

我想用画布元素填充屏幕，目前我的default.js文件看起来像这样

// ... some autogenerated code ...
app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
    // ... some autogenerated code ...

    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    canvas.width  = 600;  // I want to set width and height here so that
    canvas.height = 800;  // canvas fills the entire screen/window.
};
// ... more autogenerated code ...
4

3 回答 3

3

要获得大小，您需要：

window.outerWidth
window.outerHeight

这将返回已应用比例因子的逻辑大小。

请注意，您还想监听 View State Changes，并且当您进入/离开捕捉、填充、完整模式时，以确保您的 UI 适应新的窗口大小。

具体来说，您需要使用 CSS 媒体查询匹配：

var snappedNotification = matchMedia("all and (-ms-view-state: snapped)");
snappedNotification.addEventListener(mySnappedFunction);

或者监听window.resize，使用当前视图状态查看当前视图：

var currentViewState = Windows.UI.ViewManagement.ApplicationView.value;

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.viewmanagement.applicationviewstate.aspx

于 2012-07-24T15:34:44.400 回答
1

可以通过以下方式获得物理尺寸：

var displayInformation = Windows.Graphics.Display.DisplayInformation.getForCurrentView();
var scale = displayInformation.resolutionScale;
var height = Math.ceil(window.outerHeight * scale / 100);
var width = Math.ceil(window.outerWidth * scale / 100);

var physicalWidth = width / displayInformation.rawDpiX; // in inches
var physicalHeight = height / displayInformation.rawDpiY; // in inches
var physicalSize = Math.floor(Math.sqrt(Math.pow(physicalWidth, 2) + Math.pow(physicalHeight, 2)) * 10) / 10; // in inches

我已经在几种屏幕尺寸上尝试过，并且在大多数情况下，physicalSize 是准确的，有时会出现 0.1" 错误。

我希望它会有所帮助。

于 2013-12-19T07:39:38.860 回答
0

以下 JavaScript 代码应该可以工作：

var height = $('#bodyTag').outerHeight(true);

var width = $('#bodyTag').outerWidth(true);

resolutionScale如果您想根据比例调整画布大小，也可以使用枚举：

var resolutionScale = Windows.Graphics.Display.DisplayProperties.resolutionScale;
于 2012-07-24T07:04:45.070 回答