Question

定义Web应用程序页面宽度的最佳方法是什么？我们的大多数用户都有19台显示器，但很多用14“笔记本电脑运行应用程序，有些用24”显示器（假设它是最大分辨率）。据我所知，最常用的两种方法是：使用修复宽度页面或动态（最大）宽度（100％）。

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

理想情况下，我希望页面宽度为动态（100％），直到达到某个阈值（例如600px）。这可能吗？还有更好的选择吗？

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

Answer 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');
}

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

*******更新********* 根据您对注释的说明，如果我理解正确，此示例代码应该按照您的意愿执行。页眉，页脚等自动调整大小以适应屏幕，而内容的最大宽度限制为600px，根据需要缩小。

<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>

Answer 2

为您的受众群体设计，如果80％的用户使用的是大分辨率，那么就会对其进行优化。 Google Analytics会为您提供有关访问者浏览器解析的准确统计信息。

Answer 3

固定宽度约为720px宽。

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

屏幕较小的人（仅适用于此尺寸的手机）用于缩小和滚动。
大屏幕的人无论如何都没有最大化浏览器窗口，因为可变宽度，文本变得如此宽，以至于难以阅读。

（对此有研究 - 当第一个单词是前一行最后一个单词左边的一个单词时，你的眼睛很难弄清楚你要去哪一行。）

Web 页面可能与web 应用程序不同;如果屏幕主要是桌子，按钮，图形，报告等，您可能希望尽可能多地适应液体宽度。

Answer 4

理想情况下，我希望页面宽度为动态（100％），直到达到某个阈值（例如600px）。

为此，我可能会做一个动态布局，然后在其中有一些div（标题中不可见的一个或者会做的事情）固定为600px。布局将展开和收缩，但在收缩到div的大小时停止：


page
______________....
|                :
|[600px div]     : 
|                : 
| c o n t e n t  :
|_____________...:

Answer 5

我的统计数据显示1024x768位居榜首。这就是我为我的应用程序使用960px宽度的原因。当统计数据发生变化时，我会将此值更改为其他值。

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

在Web应用程序中支持屏幕大小的最佳方法是什么？

5 个答案: