1024x768屏幕上的典型视口大小是多少?

时间:2009-01-15 16:28:01

标签: html browser cross-browser

我正在设计一个Web应用程序,我希望知道我可以设计的最大尺寸(x和y)。

As of January 2008,大约一半的用户使用1024x278屏幕,可能只有不到10%的用户使用较小的屏幕。 (手机和掌上电脑用户都是例外。)所以我们设计的最小屏幕尺寸为1024x768。

然而,这就是屏幕大小,当我们布置内容时,我们需要知道 viewport 的大小。 There is evidence大多数用户都将浏览器最大化,但仍需要为操作系统装饰和浏览器镶边减去空间。人们定制他们的铬,所以没有单一的“正确”答案;我想要一个能够容纳大多数用户的合理范围。

我看到plenty of designers谁说他们使用的宽度为960像素,因为它有很多因素,可以均匀划分 - 但在决定之前我想知道最大值我可以逃脱的尺寸,然后我可能会选择使用更少。我已经看到引用的最大宽度为960,974甚至990 ......我自己的实验似乎显示宽度为1000的工作正常。

高度更难以得到:我发现我可以在我尝试过的浏览器上运行595像素的垂直视口高度,具有典型的默认操作系统和镶边设置。但我没有尝试过很多,我宁愿看到一个更权威的来源。当然其他人已经完成了这项研究并且做得比我好。

所以我真正的问题是:我可以设计的最大视口大小是什么,并且期望它适合所有用户的80-90%没有滚动条?

13 个答案:

答案 0 :(得分:31)

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

注意:Google实验室的浏览器版本现已过时(图片标题为2009-11-18-day_google_com_100_donate_example.png)和will be shut down soon。 Google建议Google Analytics(分析)可用于确定您自己网站的浏览器大小分布:http://analytics.blogspot.ca/2012/06/new-feature-conduct-browser-size.html

答案 1 :(得分:7)

确保您的网站将以800x600呈现,但要将其展开以填充用户拥有的任何尺寸。

没有什么比1600x1200或更大的冲浪更令人讨厌,只是遇到一个不会超过700-800px宽度的哑巴网站。

查看蓝色男士,了解如何处理页面大小变化的一个很好的例子...... http://themaninblue.com/experiment/ResolutionLayout/

<强>更新 我发现了一个不错的网站,它使用了一些统计数据来确定有多少用户可以看到屏幕大小:http://www.methodologie.com/webcanvas/

答案 2 :(得分:7)

绝大多数用户在1024x 768屏幕上的最大化窗口中查看IE7中的Web,并且未修改其浏览器。所以我找到了一只豚鼠并拍了一个屏幕截图。我假设任务栏是一行并且可见 - 再次是默认行为 - 并且窗口大小为 1003 x 589 。我亲自使用了960 x 560的实时区域。

答案 3 :(得分:5)

对于它的价值,在全屏XGA上打开侧边栏默认宽度的XP IE7用户获得的视口宽度为862px。高度不是那么重要,因为我们期望垂直滚动,但也必须水平滚动是死亡。

当然,为什么这可能与实际可用的不同有很多原因,这就是为什么我们都是优秀的网页设计师并使用适当的液体布局,不是我们。< / p>

(那是什么,stackoverflow?真的吗?令人震惊,tsk。)

答案 4 :(得分:3)

我目前使用的是Acer上网本,屏幕分辨率为1024x600。请记住,我们是一个不断增长的细分市场(或者至少,尽量不要让你的垂直房地产假设768作为最小屏幕高度)

答案 5 :(得分:2)

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

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

答案 6 :(得分:1)

我打开Firefox,其大小(包括chrome)为1024x1000。我没有全屏浏览。

我的Chrome包括菜单栏,导航工具栏(带有小图标),书签工具栏,标签栏,右侧滚动条和底部的状态栏。

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

答案 7 :(得分:1)

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

我的任务栏位于屏幕的左侧,所以减去浏览器的颜色,我仍然可以使用相当可观的1831像素。通常认为这对大多数用途都有好处。

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

答案 8 :(得分:1)

我想补充一点,Shaun Inman的Mint统计应用有plugin跟踪窗口大小而非屏幕分辨率,并考虑最坏情况的浏览器镶边。然后它将结果分组为x%的访问者具有窗口宽度> y%或> z%高度,这对于做出关于特定站点的明智决策非常有用,并且从过程中获取一些猜测工作

答案 9 :(得分:1)

1007px是您在没有水平滚动条的Internet Explorer(details)中使用的绝对最大值。但是,除非你需要,否则我认为你不应该追求最大限度。相反,依赖于许多人的浏览器没有最大化的假设。

Google的Browser Size是一个很棒的工具。

答案 10 :(得分: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.

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

从这个意义上说,对于orig的答案。问题不能再容易给出了。一个非常常见的1024x768屏幕很可能是iPad - 或缩小的浏览器窗口。

答案 11 :(得分:0)

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

对于临时用户(Stereotypical:Win XP或Vista,IE6-7,没有自定义皮肤),接近1000px的宽度可能适合。如果人们修改了他们的浏览器,没有全屏运行它们或者在他们的操作系统上有自定义皮肤,这个数字可能会改变。

如果我要设计1024px宽度分辨率,我可能会选择接近980px的宽度。这完全取决于你,而且没有“唯一的答案”。在某处大约960-1000px,取决于很多东西。

当谈到页面的高度时,不要过多考虑它。将最重要的信息(导航,徽标,重要内容)放在页面顶部,不要害怕让用户滚动查找其余信息。人们已经习惯了,并且知道他们必须滚动。这是一个自然的限制,没有人希望你做任何事情。

对于最重要的信息,可能会出现高度约为550像素或更高的视口。

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

答案 12 :(得分:0)

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

我认为检查高度非常有用,因为在第一次打开页面时,可以了解观看者可以看到和看不到的内容。在信息饱和的这些日子里,你不能依赖任何访客向下滚动。

我在Firefox上的视口,当标签打开,快速链接和优秀的Web开发人员工具栏扩展名设置为1024x768时仅为572px。

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

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

相关问题