1

我正在使用 HTML 和 JavaScript 开发 Windows 8 Metro 应用程序，但我遇到了屏幕缩放问题。

目前我正在为 1366x768 设计应用程序。通常页面上有一个ListView，你可以看到这个分辨率的简单草图。 1366x768

但是当分辨率增加时，例如 2560x1440 分辨率的 ListView 看起来像下图。 2560x1440

如您所见，这看起来很丑陋。实际上我不确定我应该为高分辨率做些什么。

我想的第一件事是在屏幕中间以 1366x768 分辨率保留相同的 ListView。但我找不到办法做到这一点。

4

1 回答 1

0

您可以做一些事情来管理布局。第一个是设置ListView将在其网格布局中显示的最大行数，如下所示：

list.winControl.layout.maxRows = 2;

如果您有足够的项目，那么这将具有创建宽而浅的布局的效果。

您在问题中提到的另一种选择是将 ListView 居中并固定其大小。我发现最简单的方法是使用 CSS flex box 布局。这是一个独立的小示例，它向您展示了maxRows设置和 CSS，它应用于包含ListView（而不是 ListView 本身）的元素。创建一个新的VS项目，将标记复制到default.html文件中并启动应用程序，您将能够看到效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <style type="text/css">
        #container {
            display: -ms-flexbox;
            -ms-flex-align: center;
            -ms-flex-pack: center;
            height: 100%;
        }
        #list {
            width: 1366px; height: 768px;
        }
        .templateItem {
            width: 200px; height: 200px; font-size: 30pt;
            margin: 10px; border: thick solid white; background-color: gray;
        }
    </style>
    <script>
        WinJS.Application.onactivated = function (args) {
            data = new WinJS.Binding.List();
            WinJS.UI.processAll().then(function () {
                for (var i = 0; i < 8; i++) {
                    data.push({ value: i });
                }
                list.winControl.layout.maxRows = 2;
            });
        }
        WinJS.Application.start();
    </script>
</head>
<body>
    <div id="template" data-win-control="WinJS.Binding.Template">
        <div class="templateItem" data-win-bind="innerText: value"></div>
    </div>
    <div id="container">
        <div id="list" data-win-control="WinJS.UI.ListView" data-win-options="{
            itemDataSource: data.dataSource,
            itemTemplate:template}">
        </div>
    </div>
</body>
</html>

从你的问题很难看出，但你也可以考虑放弃ListView并使用其他东西。如果要显示的项目数量固定，您可能希望使用标准 HTML 元素并使用 CSS（可能使用新的网格布局）来更好地控制它们的显示方式。

于 2012-09-20T10:48:45.073 回答