Question

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

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

但是当分辨率增加时，例如对于2560x1440分辨率，ListView看起来如下图所示。

正如你所看到的，这看起来非常难看。实际上我不确定我应该为高分辨率做些什么。

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

Answer 1

您可以采取一些措施来管理布局。第一种是设置ListView将在其网格布局中显示的最大行数，如下所示：

list.winControl.layout.maxRows = 2;

如果你有足够的物品，那么这将产生一个宽而浅的布局。

您在问题中提到的其他选项是将ListView置于中心并修复其大小。我发现最简单的方法是使用CSS弹性框布局。这是一个小的自包含示例，它向您显示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（可能使用新的网格布局）来更好地控制它们的显示方式。

Windows 8 Metro App的高分辨率和ListView

1 个答案: