代码之家 › 专栏 › 技术社区 › Alek Davis

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

usability user-interface html

Alek Davis · 技术社区 · 17 年前

定义web应用程序页面宽度的最佳方法是什么?我们的大多数用户都有19英寸的显示器,但许多用户在14英寸的笔记本电脑上运行应用程序,有些用户有24英寸的显示器(假设是最大分辨率)。据我所知,最常见的两种方法是:使用 固定宽度 动态(最大)宽度

这两种方法都有问题。如果一页是 浪费空间 在更大的显示器上(例如,即使屏幕的30%以上的侧面为空白,用户也必须向下滚动才能获取内容)。我曾经是一个民主的支持者直到我开始在24英寸的显示器上看到页面,在14英寸和19英寸的屏幕上看起来很棒(主要问题是右对齐的项目,例如按钮,它们与主要内容分离)。

理想情况下,我希望页面宽度是动态的(100%),直到达到某个阈值(比如600px)。这可能吗?有更好的选择吗?

5 回复 | 直到 13 年前

PortageMonkey 17 年前

为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来包含内容。通过这种方式,您可以约束内容(使用上面的表达式),同时允许它根据屏幕大小展开/收缩到指定的最大宽度。

*******更新*********

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

Tom 17 年前

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

MGOwen 17 年前

固定宽度约为720像素宽。

大屏幕用户的浏览器窗口并没有最大化,因为随着宽度的变化,文本变得很宽,很难阅读。

(有研究表明,当第一个单词距离前一行最后一个单词的左边一英尺时,你的眼睛很难判断你在哪一行)。

网状物可能与web不同应用尽管;如果屏幕主要是表格、按钮、图表、报告等,您可能希望最大液体宽度尽可能适合您。

MGOwen 17 年前

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

dariol 17 年前

我的统计数据显示,1024x768位居榜首。这就是为什么我的应用程序使用960px的宽度。

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