在 Web 应用程序中支持屏幕尺寸的最佳方法是什么？答案

【问题标题】：What is the best method for supporting screen sizes in a Web app?在 Web 应用程序中支持屏幕尺寸的最佳方法是什么？
【发布时间】：2009-08-04 23:23:15
【问题描述】：

定义网络应用程序页面宽度的最佳方法是什么？我们的大多数用户都有 19" 显示器，但许多用户在 14" 笔记本电脑上运行应用程序，有些人使用 24" 显示器（假设这是最大分辨率）。据我所知，两种最常见的方法是：使用 fixed宽度 页面或动态（最大）宽度 (100%)。

这两种方法都有问题。如果页面针对 14 英寸笔记本电脑进行了固定宽度优化，那么在较大的显示器上将会有很多浪费空间（例如，即使超过 30% 的屏幕是两侧空白，用户必须向下滚动才能获取内容）。我曾经是动态宽度的支持者，直到我开始看到在 14 英寸和 19 英寸屏幕上看起来很棒的页面在 24" 显示器上显示（主要问题是右对齐项目，例如按钮，它们与主要内容分离）。

理想情况下，我希望页面宽度是动态的（100%），直到它达到某个阈值（比如 600 像素）。这可能吗？有更好的选择吗？

更新：澄清一下：我希望页面内容的宽度为 100%，但在一定范围内，比如 400 像素和 900 像素（这样用户会在之后看到一个水平滚动条将窗口大小调整为 300px 宽度，如果窗口大小调整为 1000px 宽度，则两侧会有空白区域，但在 400px 和 900px 之间，内容会自动调整）。可能吗？

【问题讨论】：

我们只是说这是可能的，但在 Internet Explorer 中不行。 ;)
我不确定我是否理解。如果用户在查看分布在高分辨率 24 英寸显示器上的网页时遇到问题，有什么办法可以阻止他们将浏览器设置为不使用整个屏幕？为什么要从用户手中夺走控制权？这通常被认为是一件坏事。
这是一个有效的观点，但这就是原因。这是一个网络应用程序，因此用户可能会在新的浏览器选项卡中打开它。也许用户已经查看了其他内容丰富的网站（如新闻等），这些网站在全屏或大窗口中运行良好，所以现在用户需要调整浏览器的大小以使这个应用程序看起来不错。页面自动调整到最大指定宽度会更加用户友好。
好吧，在这种情况下，使用 JavaScript 检查屏幕宽度并根据它加载不同的样式表。

标签： html user-interface usability

【解决方案1】：

为 div 或表格设置最大宽度的一种方法是使用 CSS 表达式

div#myDiv
{
     max-width: 980px; 
     min-width: 980px; 
     width: 980px; 
     width: expression(Math.max(Math.min((document.documentElement ?   document.documentElement.clientWidth : document.body.clientWidth) - 20, 1000), 980)+'px');
}

在您的情况下，您可以将 980 替换为 600。我经常会创建一个容器 div 来保存页眉和页脚，这样它们将扩大屏幕的整个宽度，同时使用子 div 来包含内容。通过这种方式，您可以限制内容（使用上面的表达式），同时允许它根据屏幕大小扩展/收缩，直到您指定的最大宽度。

*********更新********* 根据您对 cmets 的说明，如果我理解正确，此示例代码应该可以满足您的要求。页眉、页脚等会自动调整大小以适应屏幕，而内容的最大宽度限制为 600 像素宽，必要时可以缩小。

<html>
<head>
    <style>
    div#contentDiv
    {
        max-width: 600px;
        width:expression(document.body.clientWidth > 600? "600px": "auto" ); 
        border: red 1px solid;
    }
    div#wrapper {width: auto; border: blue 1px solid;}
    </style>
</head>
<body>
<div id="wrapper">
    <div id="contentDiv" style="height:686px; border: solid 1px red;"></div>
</div>
</body>
</html>

【讨论】：

CSS 表达式用于 max-width 正是为了支持 IE，而 max/min-width 声明将用于大多数其他浏览器，FF、Safari、Chrome、opera 等。请参阅 @987654321 @ 以获得更具描述性的支持细分。
嗯，也许我做得不对，但它似乎不起作用。在 FF 3、IETab 和 IE 8 中尝试过。在 IE 8 中，我收到 ActiveX 警告，但即使我接受了被阻止的内容，它似乎也没有做我想要的；它只是将宽度设置为常数。我在 FF 中没有看到警告，但行为是相同的。
根据您的反馈和说明，我添加了带有 HTML 的更新的简化代码 sn-p。它已经在 IE 7、8、Chrome 和 Firefox 中进行了测试。希望这会有所帮助
酷。这看起来完全像我需要的。唯一的问题是 IE 8 显示的 ActiveX 警告（如果用户不接受它，该功能将不起作用）。我假设警告是由表达式函数引起的。好消息是它似乎只在加载本地文件时发生（通过 file:///），所以应该不是问题。非常感谢。

【解决方案2】：

为您的受众设计，如果您的 80% 的用户使用较大的分辨率，请针对此进行优化。 Google Analytics 将为您提供有关访问者浏览器分辨率的准确统计数据。

【讨论】：

首先，如果您正在构建一个新应用程序，在部署之前您无法运行统计信息，此时应该完成设计。其次，对于 Intranet 应用程序，我不确定 Google Analytics 是否是一种选择。第三，即使 80% 使用更大的分辨率，如果没有必要，为什么要惩罚剩余的 20%。 PortageMonkey 建议的解决方案是一个更好的选择。
如果是新应用，那么您可能已经确定了您的目标受众，因此您可以对分辨率和平台进行一些假设。如果它是 Intranet 应用程序，那么您会更好地了解您的受众群体（远远超过公共应用程序）。

【解决方案3】：

固定宽度约为 720 像素宽。

我曾经是一个可变宽度的人，但我最终意识到：

屏幕较小的人（仅限手机，对于这种尺寸）习惯于缩小和滚动。
大屏幕用户无论如何都不会最大化他们的浏览器窗口，因为使用可变宽度，文本会变得太宽以至于难以阅读。

（对此进行了研究 - 当第一个单词距离上一行的最后一个单词的左侧一英尺时，你的眼睛很难确定你在哪一行）。

Web pages 可能与 Web applications 不同；如果屏幕主要是表格、按钮、图表、报告等，您可能需要最大化的液体宽度以尽可能适应。

【讨论】：

720px 是为了缩小。即使在我的 14 英寸笔记本电脑上，最大化的窗口也会在侧面留下浪费的空间并迫使用户滚动，这不是最佳解决方案。
两侧的空白通常并不意味着浪费空间（他确实提到了可能不适用的特殊情况 - 表格和图形丰富的应用程序）。为了更好的可读性，需要大量的空白。询问任何桌面出版专家。
视情况而定。在 24" 屏幕上的最大化窗口中，空白是可以的，但在 14" 屏幕上几乎总是浪费。
720 px 也太宽了！我有一个 10" 屏幕上网本（用于在任何地方和任何地方连续数小时编码），右侧有一个任务栏，也许还有一个聊天窗口。好的，所以我是一个边界案例。但我真的不喜欢固定宽度网页。哦，在我的 32 英寸桌面屏幕上，您的网页浪费了大约 70% 的空间。或者 100% 浪费空间，这取决于您如何看待它。
没错。如今人们使用的屏幕尺寸多种多样（从上网本到大型 LCD 显示器），固定尺寸可能不是一个好主意。

【解决方案4】：

理想情况下，我希望页面宽度是动态的 (100%)，直到达到某个阈值（例如 600 像素）。

为此，我可能会做一个动态布局，然后在其中有一些 div（在标题中是不可见的，或者其他东西会做），固定为 600 像素。布局会扩展和收缩，但当它缩小到 div 的大小时会停止：

页 ______________.... | ： |[600px 格]： | ： |内容： |_____________...：

【讨论】：

我可能误解了您的建议，但您的想法似乎是将最小尺寸保持在 600 像素（或任何数字），而我想实现相反的效果：最大宽度为 600 像素，即用户可以将其调整为 400px、300px 等，但不能调整为 601px。

【解决方案5】：

我的统计数据显示 1024x768 位于顶部。这就是为什么我为我的应用程序使用 960 像素宽度的原因。当统计数据发生变化时，我将此值更改为其他值。

对于移动用户您应该使用不同的视图，针对特殊情况进行优化。

【讨论】：