Browser 推荐的网站分辨率（宽度和高度）？

是否有关于通用网站分辨率的标准

我们的目标是更新的显示器，可能至少1280px宽，但高度可能会有所不同，每个浏览器也可能有不同的工具栏高度

---

这有什么标准吗？

我认为这是个坏主意。将内容与布局分离的全部目的是使您的网页能够在任何类型的浏览器上显示

人为的限制，比如最小屏幕尺寸会限制你的市场

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

---

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

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

我想说，您应该只希望用户拥有分辨率为800x600的显示器。加拿大政府的标准将此列为要求之一。尽管对于一个拥有漂亮的宽屏显示器的人来说，这似乎很低，但请记住，并不是每个人都有一个漂亮的显示器。我仍然认识很多人以1024x768的速度跑步。而且，在旅行中遇到穿着800x600的人并不少见，尤其是在便宜的网吧里。另外，如果你不想的话，让你的浏览器窗口全屏也不错。您可以在更宽的监视器上使站点更宽，但不要让用户水平滚动。曾经支持较低分辨率的另一个优势是，你的网站可以在手机和任天堂Wii上工作，这要容易得多

---

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

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

这就是为什么你会看到许多网站（包括这一个）使用一个大约1000像素宽的中心柱，最重要的内容在500-600像素的顶部，因此在这种尺寸的屏幕上观看时，它位于折叠上方

---

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

尝试将1024作为最小宽度。尝试一下800的外观，但不要太费心去做。在800x600上，几乎没有一个主要网站能够正常工作，因此以这种分辨率工作的人无论如何都会遇到问题

---

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

以下是2008年浏览器显示的统计数据：

---

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

尽管最佳宽度可能为1024，但您必须根据各种浏览器设置（导航工具栏、书签工具栏、状态工具栏等）调整高度并考虑任务栏设置。它会很快将768降到550左右。

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

还有一件事要考虑：不是每个人都在全屏上运行浏览器（我不这样做）。所以如果设计一个特定的（和大的）“屏幕大小”是可行的，因为很多原因。

---

2010年12月15日更新：当我第一次回答这个问题时，800像素是一个合适的答案。然而，在这一点上，我建议1024像素宽（或其他人指出的960像素）。技术继续发展…

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

---

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

我想这取决于你的听众，以及节目的性质

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