对于一般的非技术用户,我的web应用应该以什么样的屏幕分辨率为目标?

使用液体布局。然后你可以很容易地容纳从~800到~1600宽度的每个人,并且有更多的工作和照顾甚至更低的分辨率设备。如果用户发现文本太小,这也为@1024提供了缩放页面的空间。

别忘了,像上网本这样的东西,不会有我们今天期待的大屏幕。你可以使用水平滚动条,但是如果你必须滚动页面来获取文本的主体,你就会迷失方向。

好好利用 960.gs 你将为创建一个好的网站设置所需的一切:)

alt text http://www.balexandre.com/temp/2009-09-26_1559.png

这个 960电网系统 是通过提供基于 960像素 . 有两种变体:12列和16列,可以单独使用或串联使用。

这是一个很好的开始,做网页或图片,他们有一个完整的模板,几乎任何一个好的设计程序(photoshop,ilustrator,焰火,indesign等)以及 CSS generator 和A Grid Overlay 帮助你建立网站。

我用它,它太棒了!查看 demo

荨麻有 tutorial 和 video . 伍瑟姆斯写了一篇 post 标题为“为什么我们喜欢960.gs”,并将其用作wordpress主题的起点。西班牙语使用者也可以通过 Jepser Bernardino 和 Miguel Angel Alvarez .

在听起来如此傲慢之前,你可能想了解一下现代用户群。上网本。PDA。智能手机。智能本(你 做 知道那些是什么,非常复杂,对吧?)。屏幕为“东方肖像”的程序员。把窗户并排堆放的人。售货亭。

更新 根据与约翰的谈话,我编辑了这个问题,把男高音改了一点,以反映他的原意。然而,我最初写的那一段仍然是真的——我没有看到最新的统计数据,但是“90%的用户在他们的浏览器上有AXB结果/窗口大小”的日子可能已经一去不复返了,就像宽屏笔记本电脑和移动设备一样。让用户界面设计师的生活更加精彩:)

既然如此,开发一个 真正地 可用的网站,你需要结合流动的布局,理想情况下,能够使用Portlet和门户框架(想想MyYahoo),这样人们可以选择最适合他们的页面布局。

纯朴?我认为用这种方式来形容未洗的群众有点粗鲁。我想现在每个人和他们的狗都有一个1024倍宽的监视器,这要感谢戴尔和其他人……

作为我的“基地”,我会考虑的最大目标是1280x1024,但我更有可能去1024x768。

也就是说,在我目前的项目中,我试图做一个最小宽度为800的液体布局,以容纳上网本,通常最大宽度约为1000像素(通常为970像素)。当然,我也有为自己设计的奢侈,所以我有幸告诉IE6用户,他们应该升级,这使得液体布局设计更容易。

总结:

使用浏览器的 内部的 尺寸设置为1250x668,以满足92.7%的用户。

我喜欢数据驱动。为此,w3schools有一个 Browser Display Statistics 页面,它们会定期更新新的统计信息,显示每个屏幕分辨率的常见程度。

截至2015年1月,访问w3schools页面的浏览器中,92.7%的浏览器附加到大于1024x768的显示器上,尽管39.3%的显示器高度(或更低)限制在768像素,主要是因为其中33%的浏览器有1366x768的显示器。

不幸的是,w3schools测量了 屏幕 分辨率,而不是用于呈现网页内容的内部维度。如果能得到用户的 window.innerWidth 和 window.innerHeight 相反。

因为我们没有这些,我们必须为可能比我们自己更大的窗口装饰以及浏览器小部件预留空间,这些小部件可能会进一步占用专门用于呈现网站的空间。此外,并非所有用户都在最大化的web浏览器中浏览web,尽管我认为如果我们假设低分辨率显示将具有最大化的浏览器,则可以忽略这一点。

windows 7似乎是吞噬屏幕不动产的最大罪魁祸首,我在任务栏上的测量值是30-40px(我不得不搜索屏幕快照,因为我不运行windows)。带有标题栏、菜单栏、书签工具栏和状态栏的firefox又吃掉了159px,而更苗条的现代ff只消耗了64px。让我们使用苗条的版本,并假设大约100像素的垂直空间将丢失。最大化的浏览器似乎不会占用任何额外的水平空间,所以您只需要考虑滚动条,但我会保留一些像素窗口边缘以防万一,使我们达到30像素。

几年前(当我做了比现在更多的网页设计时),我会将自己的浏览器大小调整为 内部的 大小为800x550,并确保大多数页面没有滚动条。现在,它看起来可以扩展到 内部的 尺寸为1250x668。

你可以把这个放在你的位置栏里检查你的内部尺寸:

javascript:alert(window.innerWidth + "x" + window.innerHeight)

这些值是只读的;你以前可以运行类似这样的程序来调整你的内部尺寸,但是(多亏了滥用广告的人) it no longer works :

javascript:window.resizeTo(window.outerWidth-window.innerWidth+1250,window.outerHeight-window.innerHeight+668)

一张临别赠言: 仅仅因为你假设某个大小并不意味着你不应该确保你的网站仍然以较小的分辨率运行。页面可能很难看,但是 它必须是功能性的!