javascript - 在 Metro 应用程序中获取窗口尺寸

Question

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

我想用 Canvas 元素填充屏幕，目前我的 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 ...

Answer 1

要获得尺寸，您需要:

window.outerWidth
window.outerHeight

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

请注意，您还需要监听 View 状态变化，以及当您进入/离开对齐、填充、完整模式时，以确保您的 UI 适应新的窗口大小。

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

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

或者监听window.resize，使用当前 View 状态查看当前 View :

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

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