普通网站解析有什么标准吗？
我们针对较新的显示器，可能至少宽1280像素，但高度可能会有所不同，每个浏览器也可能有不同的工具栏高度。
这有什么标准吗？
答案 0 :(得分：223)
这些天的建议是：
优化1024x768 。对于大多数网站，这将涵盖大多数访问者大多数日志显示，您访问的92-99％将超过1024宽。虽然1280越来越普遍，但仍有很多1024和一些低于此。为此做出优化，但不要忽视其他人。
1024 = ~960 。考虑滚动条，窗口边缘等意味着1024x768屏幕的实际宽度为about 960 pixels。有些工具基于略小的尺寸，大约940 。这是twitter bootstrap中的默认容器宽度。
不要设计一种尺寸。窗户大小各不相同不要假设屏幕大小等于窗口大小。设计合理的最小值，但假设它会调整。
使用响应式设计和液体布局。使用将在调整窗口大小时调整的布局。人们做了很多，特别是在大型显示器上。这只是一个很好的CSS练习。有几个前端框架支持这一点。
将移动视为一等公民。您将始终从移动设备获得更多流量。这些引入了更多的屏幕尺寸。您仍然可以优化960，但使用响应式网页设计技术意味着您的页面将根据屏幕大小进行调整。
记录浏览器显示信息。你可以得到关于这个的实际数字。我找到了一些数字here和here以及here。您还可以装配您的网站以收集相同的数据。
用户会滚动，所以不要担心身高。旧的论点是，用户不会滚动，任何重要的东西都应该“在首位”。这在几年前被推翻了。 Users scroll a lot
有关屏幕分辨率的更多信息：
有关响应式设计的更多信息：
响应式设计和液体布局的工具和前端框架：
答案 1 :(得分：29)
不好的想法，我相信。将内容与布局分离的关键在于使您的网页能够在任何类型的浏览器上显示。
设置最小屏幕尺寸等人为限制将限制您的市场。
话虽如此，我相信每个桌面都应该能够显示1024x768。但是，在iPhone或其他受屏幕挑战的设备上运行的浏览器，甚至那些不将整个桌面用于浏览器的浏览器呢？
在回答您的具体问题时，不，我不相信浏览器中的最小或常见显示区域有任何标准。
答案 2 :(得分：8)
强制用户水平滚动是严重的UI违规行为。除非您专门为具有已知屏幕尺寸的人群构建网站，否则最安全的是确保您的设计适用于宽度小至800像素的屏幕（如果内存为我提供正确的服务，则大约占网络冲浪人口的8％）。明智的做法是让它适应更大的屏幕，但不会花费800x600的人们。
这也是另一件需要考虑的事情：不是每个人都全屏运行他们的浏览器（我没有）。因此，如果设计特定（和大）“屏幕尺寸”，那么这个想法实际上并不是出于多种原因。
2010年12月15日更新：当我第一次回答这个问题时，800像素是一个合适的答案。但是，在这一点上，我建议宽1024像素（或其他人指出的960）。技术进步......
答案 3 :(得分：4)
以下是2008年浏览器显示的统计信息： http://www.w3schools.com/browsers/browsers_display.asp
大约50％的用户仍在使用1024x768。如果您希望您的网站在高分辨率下看起来不错，请使用灵活的布局。
答案 4 :(得分：3)
这是一个很棒的工具：Google Labs Browser Size
答案 5 :(得分：3)
实际上有宽度的行业标准（至少根据雅虎而言）。 它们支持的宽度为750,950,974,100％
这些宽度的优势在于它们的预定义网格（列布局），如果您要包含任何广告，它们可以很好地与广告的标准尺寸配合使用。
有趣的谈话太值得关注。
请参阅YUI Base
答案 6 :(得分：2)
我想说你应该只期望用户拥有800x600分辨率的显示器。加拿大政府有标准将此列为要求之一。虽然对于有花式宽屏显示器的人来说这似乎很低，但请记住并非每个人都有一个漂亮的显示器。我仍然知道有很多人在1024x768上运行。并且遇到一个以800x600运行的人并不常见，特别是在旅行时便宜的网吧。此外，如果您不想让浏览器窗口全屏显示，这很好。您可以在更宽的显示器上使网站更宽，但不要让用户水平滚动。永远。支持较低分辨率的另一个好处是，您的网站可以在手机和Nintendo Wii上运行更轻松。
关于你至少1280宽的一张纸条，我不得不说这是太过分了。大多数17甚至我的19英寸非宽屏显示器仅支持最大分辨率1280x1024。我正在打字的14英寸宽屏笔记本电脑只有1280像素。我想说你应该争取的最大最小分辨率是1024x768，但800x600是理想的。
答案 7 :(得分：2)
到目前为止所有的答案都谈到桌面显示器，但我在iPhone上使用堆栈溢出，我认为你不应该通过定位1024或1280水平像素来排除任何移动平台。标记您的页面，以便浏览器知道这一切意味着什么并使其可用将免费提供，即使是屏幕阅读器和您没有想到的其他工具包。
答案 8 :(得分：1)
最好不要针对任何特定的分辨率，而是要轻松适应许多不同的分辨率。
答案 9 :(得分：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组以不同分辨率呈现的样式。在我们的示例中，如果屏幕的分辨率大于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;”的文章中的讨论。或“包含”属性，它们将使您的背景图形流畅，并能够在所有分辨率下完美呈现。
按照网站教程，您可以创建一个可以呈现所有内容的网页！
答案 10 :(得分：1)
灵活或液体布局会稍微重新设计一下，例如，如果您使用的背景图像必须与身体背景图像相匹配。
我宁愿为网站制作不同的CSS布局，并根据用户的分辨率应用它们，或者如果不可能（尚未深入研究），请将其作为可选择的选项。
答案 11 :(得分：1)
我建议您查看媒体查询。这是CSS的一个有用的新增功能，它真的很有意义，你会想知道为什么这个没有早点实现。基本上它允许您直接通过CSS定位浏览器属性（例如max和min-widths）并从那里分支您的布局代码。与创建打印样式表类似，您可以在同一个文件中并行创建桌面和移动布局，从而为开发提供支持。
答案 12 :(得分：1)
我个人总是坚持最大宽度1000px，以页面中间为中心（通过左/右边距：自动）。
如果您的运行速度低于1024x768，则需要升级。认真。差不多是2010年了。你可以购买1250x1024原生商品的廉价液晶显示器。
答案 13 :(得分：1)
我从设计师那里得到很多问题，不仅要考虑宽度，还要考虑使用什么高度来“保持一切都在首位”。这是我最近给出的一个答案 -
对于宽度，我不是设计师，但我已经读到960px宽度是目前的方式，因为它有助于分成看起来不错的列，并且很适合大多数显示器。如果可以的话，设计一个流畅的布局 - 但这并不总是实用的，这取决于你的设计师，你的CSS技巧，图像和文本的数量。
（你总是希望每行有65-80个字符，行高约1.15）。这是文本的最佳列宽，并且已被证明比非常宽或窄的列更快更舒适地阅读。
至于“首屏”，我只需要警告不要在网络上使用任何此类概念。可以而且应该避免水平滚动，但垂直滚动是您无法100％避免的。我可以告诉你的是，在1024x768显示器上（至少95％的用户拥有或更高）你应该可以使用固定的600px高块。但是有很多不同的显示格式，浏览器chrome可以占用很多空间，并不是每个人都能最大化浏览器窗口。
这里有一些其他网站或多或少地说同样的东西 - 但是 计划为每个人提供绝对“高于一切”的一切都是艰难的 因为根据实际情况你可能只有400px左右 统计。
最后一篇很长篇文章详细介绍（我发帖更多，但SO说我太菜鸟了） - How to design for Browser Sizes - baekdal.com
答案 14 :(得分：1)
无论您的目标浏览器大小如何，请确保为浏览器工具栏，状态栏和滚动条包含空格，如上所示。 Internet Explorer（IME）通常在工具栏和状态栏中具有超过100px的垂直空间。通常，如果我拍摄的是1024 x 768，我会尝试创建一个大约960 - 980px宽和600px高的设计以确保安全。这样你可以在必要时容纳滚动和一些漂亮的空白区域（如果设计需要它）。我强烈推荐YUI网格用于需要针对特定尺寸的实例：
答案 15 :(得分：1)
尽管最佳宽度可能达到1024，但您必须根据各种浏览器设置（导航工具栏，书签工具栏，状态工具栏等）调整高度，并考虑任务栏设置。它会迅速将768降至550左右。
答案 16 :(得分：1)
我们使用的指南似乎相当广泛使用，并且可以通过我们从Google Analytics获得的数据进行备份，这些指南旨在设计网站，以便它可以在1024像素宽和768像素的屏幕上工作高（1024x768和1280x800是我们看到的最常见的分辨率，占所有流量的至少70％）。
这就是为什么你会看到许多网站（包括这个网站）使用大约1000像素宽的中心列，并且最重要的内容位于前500-600像素中，因此当在此大小的屏幕中查看时，它位于首屏。
使用1000像素宽的布局在宽度高达约1680像素的屏幕尺寸上工作得相当好（通常与笔记本电脑上看到的一样高，除了大的17英寸像素）但开始看起来有点傻在1920像素宽的计算机（高端计算机，通常是工作站），然而这些非常高的分辨率并不占一般互联网上大部分的流量 - 2％或更少（另一方面，如果你有专业观众像这个网站，高分辨率的数字可能会更高一些。）
答案 17 :(得分：0)
我刚刚从我有权访问的所有客户站点中获取了一些屏幕分辨率，其中包括超过8个行业的20多个站点，结果如下：
alt text http://unkwndesign.com/so/percentScreenResolutions.png
基于这一点，我会说确保它在1024x768上看起来很好，因为这是长镜头中的大多数。也不要担心高度，但是尽量避免使大多数页面以您的默认字体大小超过1-2个打印页面，大多数人不会阅读那么长的页面，并且如果用户安装了一个占用的工具栏垂直空间，我个人的偏好是，这是他们的问题，但我不认为这是一个很大的交易。
*请注意，由于四舍五入，百分比加起来为100.05％。
答案 18 :(得分：0)
请注意，分辨率越高，互联网浏览器最小化的可能性就越小。
有些浏览器也有横条。
这取决于你想要渲染的内容，但我会选择宽度不变的布局，不会破坏大约800-900宽度。
高度不是真正的问题。
答案 19 :(得分：0)
最终，这不是标记的标准或最佳实践问题，而是了解您的受众并确保您的网站符合您的要求。
考虑浏览器视口的宽度而不是屏幕分辨率更为重要 - 您不能假设显示器上的每个像素都将分配给浏览器（即使它是，您也必须减去浏览器镶边）。如果您可以访问报告浏览器宽度的分析（ n.b。浏览器宽度，而不是屏幕分辨率），那么请密切关注。
尝试容纳尽可能广泛的视口很好，但有一些限制。 CSS media types可以处理一些挑战，有些则不能。有些可以使用流体布局进行处理。但是流体布局在所有情况下都不起作用，具体取决于要显示的信息类型，线长，读数舒适度，等。某些流体布局在宽屏显示中不起作用。大多数在大小低于某个宽度时会断裂，等。
尽管我个人喜欢为960像素及以上的视口设计，但你不能总是这么做。所以在某些情况下，设计视口<= 760像素左右（800像素宽显示，最大化）仍然是最安全的 - 尽管我们终于可以一劳永逸地抛弃这个限制 - 至少对桌面来说 - - 快到了。
如果转换是一个问题 - 并且你有一个固定的宽度布局 - 你最好有一个充分的理由放置用户需要点击的任何东西，以便收银机在任何地方去“ka-ching”第760个像素。
同样适用于主要导航。
最后，在您可以掌握的所有内容中测试您的布局。大。小。桌面。掌上电脑。作品。没有替代品。
答案 20 :(得分：0)
答案 21 :(得分：0)
我的目标是1024像素的显示器（但不要使用100％的空间）。我放弃了那些800x600的人。我宁愿用过时的硬件惩罚那些过时的硬件，如果他们需要的话可以滚动它们，而不是通过浪费空间来惩罚每个人使用新设备。
我认为这取决于您的受众群体，以及您应用的性质。
答案 22 :(得分：0)
尝试将1024定位为最小宽度。尝试看看它是如何看待800的，但是不要太费力地做到这一点。在800x600时，几乎所有主要网站都无法运行，因此按照该分辨率工作的人总是会遇到问题。
如果您打算采用液体布局，请确保文字不会太宽，因为当线条太长时，它们会变得难以阅读。这是大多数网站具有固定宽度的主要原因。
