建议网站分辨率(宽度和高度)?[关闭]

现在的建议是:

为1024x768优化 . 对于大多数网站,这将覆盖大多数访问者。大多数日志显示,92-99%的访问范围将超过1024个。虽然1280越来越普遍,但在1024点仍然有很多,有些低于此。为此进行优化,但不要忽略其他。

1024=960 . 计算滚动条、窗口边缘等意味着1024x768屏幕的实际宽度为 about 960 pixels . 一些工具基于 稍小一点,大约940 . 这是中的默认容器宽度 twitter bootstrap .

不要设计一种尺寸 . 窗户大小不一。不要假设屏幕大小等于Windows大小。设计一个合理的最小值,但假定它会调整。

使用响应式设计和液体布局 . 使用调整窗口大小时将进行调整的布局。人们经常这样做,尤其是在大屏幕上。这只是一个很好的CSS练习。有几个前端框架支持这一点。

将手机视为一流公民 . 移动设备的流量一直在增加。这将引入更多的屏幕尺寸。您仍然可以为960进行优化,但使用响应式Web设计技术意味着您的页面将根据屏幕大小进行调整。

日志浏览器显示信息 . 你可以得到关于这个的实际数字。我找到一些号码 here 和 here 和 here . 您也可以调整站点以收集相同的数据。

用户会滚动,所以不用担心高度 . 老的观点是用户不会滚动,任何重要的东西都应该是“在折叠上面”,这在多年前就被推翻了。 Users scroll a lot .

有关屏幕分辨率的详细信息:

• Screen Resolution and Page Layout
• Best Screen Resolution to Design Websites
• Design for browser size - not screen size

有关响应式设计的详细信息:

• Responsive Web Design (2010年5月25日),Ethan Marcotte,单子。
• Responsive Web Design 在维基百科
• Multi-device layout patterns (2012年3月14日)卢克·沃罗布列夫斯基。为适应性强的多设备屏幕布局列出最流行的模式。

用于响应式设计和液体布局的工具和前端框架:

• Twitter Bootstrap
• Zurb Foundation
• 50 fantastic tools for responsive web design (2012年4月24日)Denise Jacobs&Peter Gasston

我想是个坏主意。将内容与布局分离的关键是使网页能够显示在任何浏览器上。

设置人为限制,如最小屏幕大小,将限制您的市场。

尽管如此,我相信每个桌面都应该能够显示1024x768。但是,在iPhone或其他屏幕受到挑战的设备上运行的浏览器呢,甚至那些不使用整个桌面的浏览器呢?

对于您的特定问题,不,我不认为浏览器中有任何关于最小或公共显示区域的标准。

强制用户水平滚动是一种严重的用户界面违规行为。除非你是专门为一个已知屏幕大小的用户构建一个网站,否则你最安全的方法就是确保你的设计能在800像素宽的屏幕上运行(如果内存适合的话,大约占整个网页浏览用户的8%)。让它很好地适应更大的屏幕是明智的,但不以800x600的用户为代价。

还有一件事要考虑:并不是每个人都全屏运行他们的浏览器(我不这么认为)。因此,如果设计一个特定的(和大的)“屏幕大小”是可以的,这一想法在很多方面都不起作用。

2010年12月15日更新:当我第一次回答这个问题时,800像素是一个合适的答案。不过,在这一点上,我建议使用1024像素宽(或如其他人指出的960像素)。科技进步…

以下是2008年浏览器显示的统计数据: http://www.w3schools.com/browsers/browsers_display.asp

大约50%的用户仍在使用1024x768。如果你想让你的网站在高分辨率下看起来漂亮,使用灵活的布局。

实际上,宽度有行业标准(至少在雅虎看来是这样)。 支持的宽度为750、950、974、100%

对于预定义的网格(列布局),这些宽度有一些优势,如果要包含任何内容,它们可以很好地与广告的标准尺寸配合使用。

有趣的谈话太值得看了。

看见 YUI Base

这里有一个很棒的工具: Google Labs Browser Size

我想说,您应该只期望用户拥有800x600分辨率的监视器。加拿大政府的标准将此列为要求之一。尽管对于拥有漂亮宽屏显示器的人来说,这似乎很低,但请记住,并不是每个人都有一个好的显示器。我仍然知道很多人在1024x768上跑步。在800x600上跑步的人,尤其是在旅行时在便宜的网吧里跑步,这种情况并不少见。另外,如果你不想的话,最好让你的浏览器窗口全屏显示。您可以在更宽的显示器上使站点更宽,但不能使用户水平滚动。曾经。支持低分辨率的另一个优点是你的网站可以在手机上运行,任天堂Wii更容易使用。

一张至少1280宽的便条,我不得不说这太过分了。大多数17英寸甚至19英寸的非宽屏显示器只支持1280x1024的最高分辨率。我现在正在输入的14英寸宽屏笔记本电脑只有1280像素宽。我想说,您应该争取的最大最小分辨率是1024x768,但800x600是理想的。

到目前为止,所有的答案都是关于桌面显示器的,但我在iPhone上使用的是堆栈溢出,我认为你不应该通过瞄准1024或1280个水平像素来排除任何移动平台。标记你的页面,这样浏览器就知道它的全部含义,使其可用将免费提供,即使在屏幕阅读器和其他你没有想到的工具包。

最好不要针对任何特定的分辨率,而是很容易适应许多不同的分辨率。

我们使用的指导原则,似乎是相当广泛的使用,并由我们从谷歌分析得到的数据支持,是为了设计网站,使其能够在1024像素宽和768像素高的屏幕上工作(1024x768和1280x800是我们看到的最常见的分辨率,至少占所有流量的70%)。

这就是为什么你会看到许多网站(包括这一个)使用大约1000像素宽的中央栏,其中最重要的内容在500-600像素之间,所以当在这种尺寸的屏幕上观看时,它位于折叠上方。

使用1000像素宽的布局在高达1680像素宽的屏幕上工作得相当好(通常和笔记本电脑一样高,除了17英寸的大屏幕),但在1920像素宽的屏幕上(高端计算机,通常是工作站)确实看起来有点傻,但是这些非常高的分辨率并不能占很大比例。一般互联网流量的2%或更少(另一方面,如果你有像这个网站这样的专业观众,高分辨率的数字可能会更高)。

尽管最佳宽度可能是1024,但您必须根据各种浏览器设置(导航工具栏、书签工具栏、状态工具栏等)和任务栏设置调整高度。它会很快把768降到550左右。

无论目标浏览器的大小如何,请确保为浏览器工具栏、状态栏和滚动条留出上述空间。InternetExplorer(IME)在工具栏和状态栏中通常有超过100px的垂直空间。通常,如果我拍摄的是1024 x 768,我会尝试创建一个宽约960-980px,高约600px的设计来保证安全。这样,您可以在必要时容纳滚动和一些漂亮的空白(如果设计需要的话)。我强烈推荐YUI网格用于需要针对特定大小的实例:

YUI Grid

我从设计师那里得到了很多问题,不仅是宽度,还有使用什么高度来“保持一切在折叠之上”。这是我最近给出的一个答案-

至于宽度,我不是一个设计师,但我已经读到960px的宽度是这些天的发展方向,因为它可以将自己划分成看起来不错的列,并且很适合大多数显示器。如果可以的话,设计一个流动的布局——但这并不总是实际的,这取决于你的设计师,你的CSS技能,图像和文本的数量。

(您总是希望每行有65-80个字符,行高约为1.15)。这是文本的最佳列宽,而且与非常宽或很窄的列宽相比,它的阅读速度更快、更令人愉快。)

至于“以上折叠”,我只是要注意不要在网上使用任何这样的概念。水平滚动可以也应该避免,但是垂直滚动是不能100%避免的。我能告诉你的是,在1024x768显示器上(至少95%的用户有这个或更高),你应该可以使用一个固定的600px高的块。但是有许多不同的显示格式,浏览器Chrome可以占用很多空间,并不是每个人都能最大化浏览器窗口。

这里有一些其他网站或多或少地说了同样的话-但是 为每个人制定绝对“高于标准”的计划是困难的。 因为根据实际情况,你可能只有400像素左右 统计学。

最后是一篇很长很详细的文章(我会发表更多,但也会说我太没兴趣了) - How to design for Browser Sizes - baekdal.com

我个人一直坚持最大宽度为1000px,集中在页面中间(通过页边左边/右边:自动)。

如果您的运行速度低于1024x768,则是升级的时候了。说真的。快到2010年了。您可以购买本地分辨率为1280x1024的廉价液晶显示器。

我建议你看看媒体的问题。这是一个有用的新增加的CSS,真的很有意义,你会想知道为什么这没有实现waaay早期。基本上,它允许您通过CSS直接定位浏览器属性(如最大和最小宽度),并从中分支布局代码。与创建打印样式表类似,您可以在同一个文件中并行创建桌面和移动布局,这对开发很有帮助。

不过,灵活或流畅的布局确实会稍微改变设计,例如,如果您使用的背景图像必须与身体背景图像匹配。

我宁愿为网站制作不同的CSS布局,并根据用户的分辨率应用它们,或者如果这不可能(还没有深入研究),则将其作为可选择的选项。

好吧,我在这里看到很多误传。对于初学者来说,创建一个使用特定分辨率的网页,例如800x600,只使用该分辨率才能使该网页正确呈现!当同一页面显示在其他人的笔记本电脑或家用电脑显示器上时,该页面将使用该屏幕的当前分辨率显示,而不是设计页面时使用的分辨率。不要为一个特定的分辨率创建网页!有太多不同的长宽比和屏幕分辨率,无法期望“一刀切”的方案,而Web设计不存在这种方案。解决方案是:使用CSS3媒体查询创建适合分辨率的代码。下面是一个例子:

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

看,我们刚刚做的是指定3组以不同分辨率呈现的样式。在我们的示例中,如果屏幕的分辨率大于800px,则将执行1024的CSS。同样,如果显示内容的屏幕是1224px,那么1280将被执行,因为1224大于1024。我现在正在研究的这个网站的所有分辨率都是800x600到1920x1080。要记住的另一件事是,并非所有分辨率相同的显示器都有相同大小的屏幕。您可以将15.4台笔记本电脑并排放置,虽然两台看起来都一样,但它们的分辨率可能会大不相同,因为并非所有像素在不同的LCD屏幕上都是相同的大小。因此,使用媒体查询,并开始创建一个高分辨率的笔记本电脑屏幕,特别是1280+的网站。此外,在笔记本电脑上使用不同的分辨率创建每个媒体查询。您可以使用Windows中的分辨率设置来调整800x600并在该资源处创建媒体查询,然后切换到1024x768并在该资源处创建另一个媒体查询。我可以继续,但我认为你们应该明白这一点。

更新:这里有一个使用媒体查询的链接,可以帮助解释更多信息, Innovative Web Design for Mobile Devices with Media Queries

该教程将向您展示如何为所有设备进行设计。还有专门针对媒体查询的教程。我开发了整个站点来呈现所有设备、所有屏幕和所有分辨率,不使用子域,只使用CSS!我仍在努力支持平板电脑和智能手机。该网站在任何笔记本电脑或50英寸液晶电视上都能完美呈现,许多页面在所有移动设备上都能完美工作。如果你把所有的代码都放在页面上,那么你的页面将快速加载!另外,一定要注意那篇文章中关于CSS“background-size:cover”或“contain”属性的讨论,它们会使背景图形流畅,并且能够以所有分辨率完美呈现。

遵循网站教程,你可以制作一个单一的网页,呈现所有东西!

尝试将1024作为最小宽度。尝试一下它看起来是800,但不要太费事使之起作用。在800x600上,几乎所有的主要网站都不工作,所以在这个解决方案下工作的人无论如何都会有问题。

如果您要进行液体布局,请确保文本不会 太宽 因为当行太长时,它们会变得难以阅读。这就是大多数网站有固定宽度的主要原因。

我瞄准1024像素监视器(但不要使用100%的空间)。我已经放弃了800x600。我宁愿用过时的硬件惩罚少数人,让他们在需要的时候滚动,而不是用新设备惩罚每个人浪费空间。

我想这取决于你的读者和你的应用程序的性质。

归根结底,这不是标记的标准或最佳实践,而是了解 观众 确保你的网站做你想做的。

更重要的是要考虑浏览器视区的宽度而不是屏幕分辨率——您不能假定显示器上的每个像素都将分配给浏览器(即使是,您也必须减去浏览器的Chrome)。如果您可以访问报表浏览器宽度的分析( N.B. 浏览器的宽度,而不是屏幕的分辨率),然后密切关注。

尝试适应尽可能宽的视区是很好的,但也有一些限制。一些挑战可以通过 CSS media types 有些不能,有些可以用流体布局来处理。但是,根据要显示的信息类型、线条长度、阅读舒适性,流体布局不能在所有情况下都工作。 等。 某些流体布局在宽显示中不起作用。当尺寸小于一定宽度时,大多数断裂, 等。

尽管我个人很想为960像素及以上的视区设计,但你不能总是这样做。因此,在某些情况下,为视区设计<=760像素左右(800像素宽的显示器,最大化)仍然是最安全的——尽管我们最终可以一次性解决这个限制——至少对于桌面来说——的时间非常快。

如果转换是一个问题,而且你有一个固定的宽度布局,你最好有一个很好的理由来放置任何用户需要点击的东西,以便收银机可以在第760像素以东的任何地方进行“Ka-Ching”。

主导航同上。

最后,在你能掌握的所有东西中测试你的布局。大的。小的。桌面。手持式。作品。没有替代品。

我刚刚从所有我可以访问的客户站点中抽取了屏幕分辨率的样本,其中包括超过8个行业的20多个站点,结果如下:
alt text http://unkwndesign.com/so/percentScreenResolutions.png
基于这一点,我要说的是确保它在1024x768上看起来很好,因为这是这里的多数。同样不要担心高度,但是尽量避免让大多数页面超过1-2个打印页面的默认字体大小,大多数人不会读那么长的页面,如果用户安装的工具栏占用垂直空间,我个人的偏好是这是他们的问题,但我不认为这有什么大不了的。

*注意,由于四舍五入,这个百分比加起来是100.05%。

请记住,分辨率越高,互联网浏览器的最大化可能性就越小。

有些浏览器也有横条。

这取决于你想要渲染什么,但是我会使用一个宽度可变的布局,它不会在800-900之间中断。

身高不是问题。

斯贝姆说:“你总是希望每行有65-80个字符。”这不是真的。例如,维基百科每行可能有180个字符。或者是一个特定的网站?