25

我正在设计一个 Web 应用程序，我想知道我可以设计的最大尺寸（x 和 y）。

截至 2008 年 1 月，大约一半的用户使用 1024x278 屏幕，可能只有不到 10% 的用户使用较小的屏幕。（手机和掌上电脑用户在这里是个例外。）所以我们设计的最小屏幕尺寸为 1024x768。

但是，这是屏幕尺寸，当我们布置内容时，我们需要知道视口尺寸。有证据表明，大多数用户都将浏览器最大化，但仍然必须为操作系统装饰和浏览器镶边减去空间。人们自定义他们的 chrome，因此没有单一的“正确”答案；我正在寻求一个可以容纳大多数用户的合理范围。

我看到很多设计师说他们使用 960 像素的宽度，因为它有很多因素并且可以平均划分——但在决定这个之前，我想知道我可以逃脱的最大尺寸，那么我可能会选择少用一点。我已经看到引用的最大宽度为 960、974 甚至 990……我自己的实验似乎显示 1000 的宽度可以正常工作。

高度更难获得：我发现我可以在我尝试过的浏览器上安装 595 像素的垂直视口高度，具有典型的默认操作系统和 chrome 设置。但是我尝试的不是很多，我宁愿看一个更权威的来源。肯定有人做过这项研究，而且做得比我好。

所以我真正的问题是：我可以设计的最大视口尺寸是多少，并期望它适合 80-90% 的所有用户不使用滚动条？

4

13 回答 13

30

今天我刚刚遇到一个与我的这个老问题高度相关的网站。显然谷歌愿意分享他们关于浏览器窗口大小的知识。他们的新服务位于http://browsersize.googlelabs.com/，它基本上只是向您显示他们在典型浏览器门户大小上的数据。

注意：Google Labs 浏览器尺寸现在已经过时（图片标题为2009-11-18-day_google_com_100_donate_example.png），很快就会关闭。Google 建议可以使用 Google Analytics 来确定您自己网站的浏览器大小分布：http: //analytics.blogspot.ca/2012/06/new-feature-conduct-browser-size.html

于 2009-12-17T13:57:01.670 回答
7

确保您的网站将以 800x600 呈现，但使其扩展以填充用户拥有的任何大小。

没有什么比在 1600x1200 或更大的分辨率下冲浪时遇到一个宽度不会超过 700-800 像素的愚蠢网站更令人讨厌的了。

查看 The man in blue 了解如何处理页面大小变化的一个很好的例子...... http://themaninblue.com/experiment/ResolutionLayout/

更新： 我找到了一个不错的网站，它使用一些统计数据来确定有多少用户可以看到什么尺寸的屏幕：http ://www.methodologie.com/webcanvas/

于 2009-01-15T17:11:39.423 回答
7

绝大多数用户在 1024x 768 屏幕上以最大化的窗口在 IE7 中查看 Web，并且没有修改他们的浏览器。所以我找到了一只豚鼠并截屏了。我假设任务栏是一行并且是可见的——同样是默认行为——并且窗口大小为1003 x 589。我个人会使用 960 x 560 的活动区域。

于 2010-01-19T20:32:04.163 回答
5

值得一提的是，在全屏 XGA 下默认打开侧边栏宽度的 XP IE7 用户获得的视口宽度为 862 像素。高度并不像我们期望的垂直滚动那么重要，但必须水平滚动也是死亡。

当然，这可能与实际可用的内容不同的原因有很多，这就是为什么我们都是优秀的网页设计师并使用适当的液体布局，不是吗？

（那是什么，stackoverflow？真的吗？令人震惊，tsk。）

于 2009-01-16T02:06:53.993 回答
3

我目前正在使用屏幕分辨率为 1024x600 的 Acer 上网本。请记住，我们是一个不断增长的细分市场！（或者至少，尽量不要让你的垂直空间假设 768 作为最小屏幕高度）

于 2009-01-16T03:15:27.570 回答
2

这似乎是最近的，我想我会提到它，在搜索互联网时发现它......

http://www.nealgrosskopf.com/tech/thread.php?pid=43

于 2010-06-21T18:14:44.507 回答
1

我打开的 Firefox 大小（包括 chrome）为 1024x1000。我不会全屏浏览。

我的 chrome 包括菜单栏、导航工具栏（带有小图标）、书签工具栏、标签栏、右侧滚动条和底部的状态栏。

我的实际视口正好是 1000x843。

于 2009-01-16T03:04:33.457 回答
1

我在索尼笔记本电脑 WUXGA 屏幕 (1920x1200) 上。

我的任务栏在屏幕的左侧，所以减去浏览器 chrome，我仍然有一个相当可观的可用 1831 像素。通常发现这对大多数用途都有好处。

我只希望 stackoverflow 能检测到我的宽屏并在右侧栏中显示我的答案预览。

于 2009-01-27T01:40:12.493 回答
1

只是想我会补充一点，Shaun Inman 的Mint stats 应用程序有一个跟踪窗口大小而不是屏幕分辨率的插件，并考虑了最坏情况下的浏览器 chrome。然后，它将结果分组为 x% 的访问者的窗口宽度 >y% 或 >z% 高度，这对于做出有关特定站点的明智决策非常有用，并消除了过程中的一些猜测工作。

于 2009-03-14T03:26:01.347 回答
1

1007px 是您在没有水平滚动条的 Internet Explorer（详细信息）中使用的绝对最大值。但这就是说，除非您需要，否则我认为您不应该追求最大。相反，依赖于许多人的浏览器没有最大化的假设。

Google 的浏览器大小是一个很棒的工具。

于 2009-12-17T14:00:41.310 回答
1

最初的问题 - 尽管这是一个好问题！- 以及一些答案在 2014 年变得越来越过时。

我们现在需要承认越来越多的不同屏幕尺寸的智能手机、上网本、宽屏 iMac、视网膜、（Android / Mac）平板电脑等。

除此之外，触摸和点击之间的鸿沟越来越大，后者不再是罕见的情况。

我们现在需要device-specific style with a tap-based UI for handheld devices with fixed browser sizes并且fluid-responsive style with mouse-hover effects etc. for desktop computers.

这应该是今天讨论的重点。

从这个意义上说，答案是原始的。问题不能再轻易提出了。一个非常常见的 1024x768 屏幕很可能是 iPad - 或按比例缩小的浏览器窗口。

于 2014-05-12T22:50:54.930 回答
0

您已经找到的所有答案可能都是正确的。

对于普通用户（Stereotypical：Win XP 或 Vista，IE6-7，没有自定义皮肤），接近 1000 像素的宽度可能适合。如果人们修改了他们的浏览器，而不是全屏运行，或者在他们的操作系统上有自定义皮肤，这个数字可能会改变。

如果我要设计一个 1024 像素宽度的分辨率，我可能会选择接近 980 像素的宽度。这完全取决于您，没有“唯一的答案”。大约 960-1000 像素，取决于很多事情。

说到页面的高度，不要想太多。将最重要的信息（导航、标志、重要内容）放在页面顶部，不要害怕让用户滚动找到其余部分。人们习惯并且知道他们必须滚动。这是一个自然的限制，没有人希望你做任何事情。

对于最重要的信息，可能需要一个高度约为 550 像素或更高的视口。

因此，~980px * ~550px 可能是一个或多或少的标准视口，可用作起点:-)

于 2009-01-16T01:52:14.367 回答
0

960px 的宽度是一个很好的尺寸，因为它是如此可分割。1000px 对于许多系统来说太大了。在 Vista/Firefox 上，滚动条宽度加上框架加起来约为 33 像素。

我认为检查高度很有用，因为它可以很好地了解查看者在第一次打开页面时可以看到什么和看不到什么。在这些信息饱和的日子里，您不能依赖任何访问者向下滚动。

我在 Firefox 上的视口、标签打开、快速链接和出色的 Web 开发人员工具栏扩展在设置为 1024x768 时只有 572 像素。

如果您使用 Web 开发人员工具栏，许多有用的功能之一就是能够立即将浏览器调整为您设置的任何大小：例如。1024x768、800x600 等。因此，您可以以与这些屏幕尺寸的访问者相同的方式查看您的网站。

Web 开发人员非常值得一试：https ://addons.mozilla.org/en-US/firefox/addon/60

于 2009-02-10T10:00:13.913 回答