124

常见的网站分辨率有什么标准吗？

我们的目标是较新的显示器，宽度可能至少为 1280 像素，但高度可能会有所不同，并且每个浏览器的工具栏高度也可能不同。

这有什么标准吗？

4

23 回答 23

225

这几天的建议是：

针对 1024x768 进行优化。对于大多数网站，这将涵盖大多数访问者。大多数日志显示，您 92-99% 的访问将超过 1024 宽。虽然 1280 越来越普遍，但仍有很多 1024 和一些低于此。为此进行优化，但不要忽略其他。

1024 = ~960。考虑到滚动条、窗口边缘等意味着 1024x768 屏幕的实际宽度约为 960 像素。一些工具基于稍小的尺寸，大约 940。这是twitter bootstrap中的默认容器宽度。

不要为一种尺寸设计。窗口大小各不相同。不要假设屏幕大小等于窗口大小。设计一个合理的最小值，但假设它会调整。

使用响应式设计和流动布局。使用在调整窗口大小时会调整的布局。人们经常这样做，尤其是在大显示器上。这只是一个很好的 CSS 实践。有几个前端框架支持这一点。

把手机当一等公民。您一直在从移动设备获得更多流量。这些引入了更多的屏幕尺寸。您仍然可以针对 960 进行优化，但使用响应式网页设计技术意味着您的页面将根据屏幕大小进行调整。

记录浏览器显示信息。您可以获得有关此的实际数字。我在这里、这里和这里找到了一些数字。您还可以操纵您的网站来收集相同的数据。

用户会滚动，所以不要太担心 height。旧的论点是用户不会滚动，任何重要的东西都应该“放在首位”。这在几年前就被推翻了。用户滚动很多。

有关屏幕分辨率的更多信息：

更多关于响应式设计：

用于响应式设计和流动布局的工具和前端框架：

于 2009-02-12T15:57:00.160 回答
29

坏主意，我相信。将内容与布局分开的重点是使您的网页能够显示在任何类型的浏览器上。

设置最小屏幕尺寸等人为限制将限制您的市场。

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

在回答您的具体问题时，不，我认为浏览器中的最小或公共显示区域没有任何标准。

于 2009-01-19T00:57:26.040 回答
8

强制用户水平滚动是一种严重的 UI 违规行为。除非您专门为具有已知屏幕尺寸的人群构建网站，否则您最安全的做法是确保您的设计适用于小至 800 像素宽的屏幕（如果我没记错的话，约占网上冲浪人群的 8%）。让它很好地适应更大的屏幕是明智的，但不以仍在以 800x600 冲浪的人们为代价。

这里还有一件事需要考虑：不是每个人都全屏运行他们的浏览器（我没有）。因此，如果可以为特定（和大）“屏幕尺寸”进行设计的想法由于多种原因确实行不通。

2010 年 12 月 15 日更新：当我第一次回答这个问题时，800 像素是一个合适的答案。但是，在这一点上，我会推荐 1024 像素宽（或其他人指出的 960 像素）。科技在前进...

于 2009-01-19T01:07:31.963 回答
4

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

大约 50% 的用户仍在使用 1024x768。如果您希望您的网站在高分辨率下看起来不错，请使用灵活的布局。

于 2009-01-19T01:04:35.370 回答
3

实际上有宽度的行业标准（至少根据雅虎）。它们支持的宽度为 750、950、974、100%

这些宽度的优势在于其预定义的网格（列布局），如果您要包含任何广告，它们可以很好地与广告的标准尺寸配合使用。

有趣的谈话也值得一看。

见YUI 基地

于 2009-01-25T01:02:01.720 回答
3

这是一个很棒的工具：Google Labs Browser Size

于 2010-02-13T23:22:08.200 回答
2

我想说你应该只期望用户拥有一台分辨率为 800x600 的显示器。加拿大政府的标准将此列为要求之一。尽管对于拥有精美宽屏显示器的人来说，这似乎很低，但请记住，并不是每个人都有一台好的显示器。我仍然知道很多人在 1024x768 上运行。并且在 800x600 中运行的人并不罕见，尤其是在旅行时在廉价的网吧中。此外，如果您不想让浏览器窗口全屏显示，这也不错。您可以在更宽的显示器上使站点更宽，但不要让用户水平滚动。曾经。支持较低分辨率的另一个优点是您的网站可以在手机和 Nintendo Wii 上轻松运行。

关于您至少 1280 宽的注释，我不得不说这太过分了。大多数 17 甚至我的 19 英寸非宽屏显示器仅支持 1280x1024 的最大分辨率。而我现在正在打字的 14 英寸宽屏笔记本电脑只有 1280 像素宽。我会说你应该争取的最大最小分辨率是 1024x768，但 800x600 是理想的。

于 2009-01-19T00:59:46.143 回答
2

到目前为止所有的答案都是关于桌面显示器，但我在我的 iPhone 上使用堆栈溢出，我认为你不应该通过定位 1024 或 1280 水平像素来排除任何移动平台。标记您的页面，以便浏览器知道这一切意味着什么，使其可用将免费提供，即使在屏幕阅读器和您没有想到的其他工具包上也是如此。

于 2009-01-19T01:14:35.367 回答
1

最好不要针对任何特定的分辨率，而是轻松适应许多不同的分辨率。

于 2009-01-19T00:57:54.527 回答
1

虽然最佳宽度可能达到 1024，但您必须根据各种浏览器设置（导航工具栏、书签工具栏、状态工具栏等）和任务栏设置调整高度。它会迅速将 768 降至 550 左右。

于 2009-01-19T01:07:28.937 回答
1

无论您的目标浏览器大小如何，请确保包含上述浏览器工具栏、状态栏和滚动条的空间。Internet Explorer (IME) 的工具栏和状态栏通常有超过 100 像素的垂直空间。通常，如果我要拍摄 1024 x 768，我会尝试创建大约 960 - 980 像素宽和 600 像素高的设计以确保安全。这样，您可以在必要时容纳滚动和一些漂亮的空白（如果设计需要）。对于需要针对特定​​尺寸的实例，我强烈推荐 YUI 网格：

YUI 网格

于 2009-01-19T01:08:34.333 回答
1

我从设计师那里得到了很多问题，不仅是关于宽度，还有关于使用什么高度来“让所有东西都保持在折叠之上”。这是我最近给出的一个答案——

对于宽度，我不是设计师，但我已经读到 960 像素宽度是这些天要走的路，因为它有助于将其分成看起来不错的列，并且非常适合大多数显示器。如果可以的话，设计一个流动的布局——但这并不总是实用的，这取决于你的设计师、你的 CSS 技能、图像和文本的数量。

（您总是希望每行有 65-80 个字符，行高约为 1.15）。这是文本的最佳列宽，并且已被证明比非常宽或窄的列更快、更令人愉悦）

至于“首屏”，我只需要注意不要在网络上使用任何此类概念。水平滚动可以而且应该避免，但垂直滚动是你不能 100% 避免的。我只能告诉你的是，在 1024x768 显示器上（至少 95% 的用户有这个或更高）你应该可以使用固定的 600px 高块。但是那里有许多不同的显示格式，浏览器 chrome 会占用很多空间，并不是每个人都会最大化浏览器窗口。

这里还有一些其他网站或多或少说了同样的话——但计划让每个人都“首当其冲”的一切都很难，因为根据实际统计数据，你可能只有 400px 左右。

最后是一篇非常详细的长篇文章（我会发布更多，但我说我太菜鸟了） -如何设计浏览器大小 - baekdal.com

于 2009-06-19T18:19:13.397 回答
1

我个人一直坚持最大宽度为 1000 像素，位于页面中间（通过左/右边距：自动）。

如果您运行的分辨率低于 1024x768，则该升级了。严重地。快到 2010 年了。您可以购买原生分辨率为 1280x1024 的廉价 bin 液晶显示器。

于 2009-07-23T13:08:36.490 回答
1

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

于 2010-12-13T19:06:12.647 回答
1

灵活或流动的布局确实会限制设计，例如，如果您使用必须与主体背景图像匹配的背景图像。

我宁愿为网站制作不同的 css 布局，并根据用户的分辨率应用它们，或者如果这不可能（尚未深入研究），请将其设为可选选项。

于 2011-03-31T08:57:15.103 回答
1

好吧，我在这里看到很多错误信息。对于初学者，使用特定分辨率（例如 800x600）创建网页时，仅使用该分辨率即可正确呈现该页面！当同一页面显示在其他人的笔记本电脑或家用 PC 显示器上时，该页面将使用该屏幕的当前分辨率显示，而不是您在设计页面时使用的分辨率。不要为一种特定的分辨率创建网页！有太多不同的纵横比和屏幕分辨率，无法期待“一刀切”的场景，而网页设计不存在这种场景。这是解决方案：使用 CSS3 媒体查询创建分辨率自适应代码。这是一个例子：

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

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

更新：这里是使用媒体查询的链接，这将有助于解释更多， 带有媒体查询的移动设备的创新网页设计

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

按照网站教程，您可以制作一个可以呈现所有内容的网页！

于 2012-09-11T19:58:38.340 回答
0

我们使用的指南似乎被广泛使用，并得到了我们从 Google Analytics 获得的数据的支持，旨在设计网站，使其能够在 1024 像素宽和 768 像素高的屏幕上运行（1024x768 1280x800 是我们看到的最常见的分辨率，至少占所有流量的 70%）。

这就是为什么您会看到许多网站（包括这个网站）使用大约 1000 像素宽的中心列，并且最重要的内容位于顶部 500-600 像素中，因此在这种尺寸的屏幕中查看时它位于首屏之上。

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

于 2009-01-19T01:03:38.697 回答
0

尝试将 1024 作为最小宽度。试试它看起来如何 800，但不要太费心让它工作。在 800x600 时，几乎所有主要网站都无法正常工作，因此以该分辨率工作的人无论如何都会遇到问题。

如果您打算采用流线型布局，请确保文本不会太宽，因为当行太长时，它们会变得难以阅读。这就是大多数网站具有固定宽度的主要原因。

于 2009-01-19T01:03:59.583 回答
0

我的目标是 1024 像素显示器（但不要使用 100% 的空间）。我已经放弃了那些800x600的。我宁愿用过时的硬件惩罚少数人，让他们在需要时滚动，而不是通过浪费空间用新设备惩罚每个人。

我想这取决于您的受众，以及您的应用程序的性质。

于 2009-01-19T01:09:17.793 回答
0

归根结底，这不是标记标准或最佳实践的问题，而是了解您的受众并确保您的网站做您想做的事情。

考虑浏览器视口的宽度而不是屏幕分辨率更重要——您不能假设显示器上的每个像素都将分配给浏览器（即使是这样，您也必须减去浏览器镶边）。如果您有权访问报告浏览器宽度（nb浏览器宽度，而不是屏幕分辨率）的分析，那么请密切注意。

尝试容纳尽可能宽的视口范围很好，但也有一些限制。有些挑战可以用CSS 媒体类型处理，有些则不能。有些可以用流体布局来处理。但是流畅的布局不能在所有情况下都起作用，这取决于要显示的信息类型、行长、阅读舒适度等。一些流畅的布局在宽屏显示器中不起作用。大多数在尺寸低于一定宽度时会断裂，等等。

尽管我个人希望为约 960 像素及以上的视口进行设计，但您不能总是这样做。所以在某些情况下，为 <=760 像素左右的视口（800 像素宽显示，最大化）设计仍然是最安全的——尽管我们最终可以一劳永逸地抛弃这个限制——至少对于桌面——正在快速接近。

在转换是一个问题的地方——并且你有一个固定宽度的布局——你最好有一个很好的理由来放置用户需要点击的任何东西，以便收银机在 760th 以东的任何地方“ka-ching”像素。

主导航同上。

最后，在你能得到的所有东西上测试你的布局。大的。小的。桌面。手持式。作品。没有替代品。

于 2009-01-19T02:51:55.577 回答
0

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

*请注意，由于四舍五入，百分比加起来为 100.05%。

于 2009-01-19T03:30:23.720 回答
0

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

有些浏览器也有横向栏。

这取决于您要渲染的内容，但我会使用不会在大约 800-900 宽度处中断的可变宽度布局。

身高其实不是问题。

于 2009-02-12T16:32:14.193 回答
0

sbeam 说'你总是希望每行有 65-80 个字符'。那不是真的。例如，维基百科每行可能有 180 个字符。或者它是一个特定的网站？

于 2009-07-23T13:04:46.863 回答