logo标签列表

推荐的网站分辨率（宽度和高度）是多少？

browserstandardsresolution
124

是否有关于常见网站分辨率的标准？

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

这方面是否有任何标准呢？

34
为什么这个问题被标记为“不具建设性”？看起来是一个合理的问题，特别是最高评分和被采纳的答案提供了有价值的信息。 - Damon
20
我同意Damon的观点。这是一个有效的问题，很多人都想知道答案。我认为Stack Overflow在关闭问题方面有些过于热心了。 - webworm
Stack Overflow更适合绝对的问答，也就是那些有具体答案的技术问题，而不是那些可能存在不同意见或正确答案严格依赖于使用情况/项目的问题。 - chesscov77
StackOverflow网站的宽度大约为1090像素。很奇怪！ - Necktwi
一个有用的资源：这个Stack Exchange访问者屏幕宽度普及率的电子表格，它在Meta Stack Exchange上的2016年帖子“We're standardizing the sidebar width at 300px on all sites”中被链接。 - Rory O'Kane
23个回答
225
现在的建议是：

优化为1024x768。对于大多数网站来说，这将覆盖大部分访问者。大多数日志显示，92-99％的访问将超过1024宽。虽然1280越来越普遍，但仍有很多人使用1024及以下的分辨率。优化此分辨率，但不要忽略其他分辨率。

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

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

使用响应式设计和流体布局。使用可以根据窗口大小调整的布局。人们经常这样做，特别是在大型监视器上。这是良好的CSS实践。有几个前端框架支持此功能。

将移动设备视为一等公民。您正在不断获得来自移动设备的流量。这些设备引入了更多的屏幕尺寸。您仍然可以优化为960，但使用响应式Web设计技术意味着您的页面将根据屏幕大小进行调整。

记录浏览器显示信息。你可以获得关于此的实际数字。我在这里找到了一些数字here和here和here。你也可以设置你的网站来收集相同的数据。

用户会滚动，所以不要太担心高度问题。过去的争论是用户不会滚动，任何重要的内容都应该在“折叠线”以上。这在多年前就被推翻了。用户经常滚动。

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

更多关于响应式设计的信息：

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

8
您可以查看：http://960.gs/，这是一个完整的网站，介绍了使用960像素网格设计的各种内容。这种技术被称为“960网格设计”。 - BerggreenDK
3
看起来SO使用960，没有任何液体。只是提供信息。 - colithium
你的网站在800像素宽度下不应该出现水平滚动条。也许它看起来不是最好的，但所有内容都应该适应屏幕大小。 - palswim
这个有更新了吗？这个答案已经几年前的了。 - Crashalot
29

我认为这是个不好的想法。将内容与布局分开的整个目的就是为了使您的网页可以在任何类型的浏览器上显示。

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

话虽如此，我认为每台桌面电脑都应该能够显示1024x768。但那些运行在iPhone或其他屏幕受限设备上的浏览器呢？甚至还有那些没有使用整个桌面空间进行浏览器的浏览器呢？

回答您的具体问题，不，我不认为有关于浏览器中最小或常见显示区域的标准。

14
等等，1024x768可能是整个屏幕的大小，但系统栏、窗口装饰、菜单栏、工具栏、标签栏以及可能出现的滚动条和导航选项卡通常会减小它的可用空间。 - Svante
7
坏建议。谁说HTML不适合布局了？ 流体布局已经过时了，因为分辨率差别相对较小。试着在2560x1600分辨率的屏幕上阅读一些10pt字体大小的文本，没有任何限制宽度，你很快就会讨厌那些流体布局。 - Wouter van Nifterick
1
@Pax：我的观点是，很难设计出一种液态布局，在非常低和非常高的分辨率上都能很好地工作。我从未遇到过一个网站，使用相同的HTML在我的PDA和高分辨率显示器上都能很好地运行。最好的网站是有针对性地设计的。 - Wouter van Nifterick
1
同意，流式布局对每个人都更好。大屏幕过大不是问题，因为这些用户可以根据自己的需要调整浏览器的尺寸。 - nailitdown
9
对于流式布局，您可以始终设置最大宽度来限制那些在大屏幕上运行最大化浏览器的用户。 - Richard
显示剩余10条评论
8
强制用户水平滚动是严重的UI违规。除非您专门为已知屏幕大小的人群构建网站，否则最好确保您的设计适用于像800像素宽（如果我没记错的话，约占Web浏览人口的8％）这样小的屏幕。明智的做法是使其能够适应更大的屏幕，但不要以牺牲仍在使用800x600分辨率的人们为代价。
还有一件事需要考虑：并非每个人都以全屏运行浏览器（我不这样做）。因此，针对特定（且较大）的“屏幕尺寸”进行设计的想法实际上由于多种原因而无法奏效。
更新于12/15/2010：当我第一次回答这个问题时，800像素是一个合适的答案。然而，现在我会推荐1024像素宽（或者像其他人指出的960像素）。技术不断发展...
我会进一步陈述，强制多方向滚动可能是一种可能的违规行为。如果正确执行，水平滚动可以非常好。 http://deanoakley.com/ http://www.thehorizontalway.com/html/css/urban-outfitters/ - typeoneerror
2
我们需要的是键盘上的两个新按键，“向左翻页”和“向右翻页”。 - paxdiablo
@TypeOneError，无论如何浏览都不舒服，这不是自然的。 - UnkwnTech
@TypeOneError，这个作品集网站之所以能够很好地利用它，是因为它的“整洁”和设计的干净程度。然而，我同意Unkwntech的观点，它感觉不对劲。更不用说大多数用户都有垂直滚轮而不是水平滚轮了。这一点就足以说明水平滚动是一个糟糕的想法。 - Eric
@Eric，我的滚轮在这两个链接的网站上横向滚动。我觉得对于像作品集这样想要吸引注意力并展示艺术风格的东西来说，做一些不同是可以接受的。但一般来说，这会让用户感到困惑。 - monkeypushbutton
4
最好记住，w3schools的统计数据是针对访问他们网站的人群而言的。这主要是开发网页的人，这并不是人口的适当代表。从他们的浏览器统计数据来看，Firefox占44％，而IE占46％。这可能不是衡量一般网络的良好样本。 - Kibbee
3
1
链接失效了。它现在是Google Analytics的一部分，只有登录后才能访问，在Audience > Technology > Browser & OS > 选择“屏幕分辨率”下可见。 - Dave Liepmann
3

实际上，关于宽度的行业标准是存在的（至少根据 Yahoo 的说法）。他们支持的宽度有750、950、974和100%。

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

这也是一个值得观看的有趣讲座。

请参见YUI Base

你能否添加一下你提到的那个演讲的链接？ - Sri Kadimisetty
2
我认为你应该仅期望用户拥有800x600分辨率的显示器。加拿大政府的标准将其列为要求之一。尽管对于拥有时尚宽屏显示器的人来说可能低了，但请记住并非每个人都有好的显示器。我还知道很多人使用1024x768的显示器。在旅游时，在廉价网吧遇到分辨率为800x600的电脑也是很常见的事情。此外，如果您不想，也无需使浏览器窗口全屏。您可以在更宽的监视器上使站点更宽，但不要让用户水平滚动。支持更低的分辨率的另一个优点是您的站点将更容易在移动电话和Nintendo Wii上运行。

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

2

到目前为止，所有的答案都谈论了桌面显示器，但我正在使用iPhone上的Stack Overflow，我认为您不应通过针对1024或1280个水平像素来排除任何移动平台。标记您的页面，使浏览器知道它的全部含义，并且即使在屏幕阅读器和其他您没有考虑到的设备上，也可以免费使用。

赞同我的观点，点个赞吧 :-) 尽管我有些犹豫，因为你可能会得到比我更多的投票 :-( 。哦，算了，这就是生活。 - paxdiablo
+1 似乎是用 iPhone 键盘输入此响应。 ;) 我的网站在 iPhone 的 Safari 上以 1024 的分辨率看起来很棒，顺便说一下。 - typeoneerror
使用iPhone时，我认为这将取决于你是如何拿着它的，是垂直还是水平，因为显然尺寸会有所不同。 - UnkwnTech
1
@TypeOneError 我不仅在 iPhone 上打了它，而且还在从酒吧走回来的路上；-) - user23743
@Pax 不，显然我不会。;-) - user23743
1
我建议您了解一下媒体查询。这是CSS的一个有用的新补充，它真正有意义，让你不禁想知道为什么这不是早些时候实施。基本上，它允许您直接通过CSS定位浏览器属性（例如最大和最小宽度），并从那里分支您的布局代码。与创建打印样式表类似，您可以在同一文件中并行创建桌面和移动版面，这对于开发来说非常棒。
1

灵活或流动的布局虽然会对设计产生一定限制，例如如果您使用必须与正文背景图匹配的背景图像。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接