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

What the typical viewport size on a 1024x768 screen?

提问by mcherm

I am designing a web application, and I wish to know the largest size (x and y) that I can design for.

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

As of January 2008, about half of users are using 1024x278 screens, and probably less than 10% are using smaller screens. (Phone and palmtop users are an exception here.) So we are designing for minimum screen size of 1024x768.

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

However, that's the screen size, and when we are laying out our content we need to know the viewportsize. There is evidencethat most users have the browser maximized, but one still must subtract out space for OS decorations and browser chrome. People customize their chrome, so there is no single "right" answer; I am going for a reasonable bound that will accommodate the majority of users.

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

I see plenty of designerswho say that they use a width of 960 pixels because it has many factors and can be divided up evenly -- but before deciding on this I want to know the maximumsize that I can get away with, then I might choose to use somewhat less. I have seen max widths of 960, 974 or even 990 quoted... my own experiments seem to show a width of 1000 works OK.

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

Heights are even more difficult to come by: I find I can fit a vertical viewport height of 595 pixels works on the browsers that I've tried, with typical default OS and chrome settings. But I haven't tried very many, and I would rather see a more authoritative source. Surely someone else has done this research and done it better than me.

高度更难获得：我发现我可以在我尝试过的浏览器上安装 595 像素的垂直视口高度，使用典型的默认操作系统和 Chrome 设置。但是我尝试的不多，我宁愿看一个更权威的来源。当然，其他人已经完成了这项研究，并且比我做得更好。

So my real question is this: What is the largest viewport size I can design for and expect it to fit without scrollbars for 80-90% of all users?

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

回答by mcherm

Today I just came across a site which is HIGHLY relevant to this old question of mine. Apparently Google is willing to share their knowledge about browser window sizes. Their new service is at http://browsersize.googlelabs.com/and it basically just shows you their data on typical browser portal sizes.

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

Note: The Google Labs browsersize is now very out of date (the image is titled 2009-11-18-day_google_com_100_donate_example.png) and will be shut down soon. Google suggests that Google Analytics can be used to determine browser size distribution for your own site: http://analytics.blogspot.ca/2012/06/new-feature-conduct-browser-size.html

注意：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

回答by scunliffe

Make sure your site will render at 800x600, but make it expand to fill whatever size the user has.

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

Nothing is more annoying than surfing at 1600x1200 or bigger only to encounter a dumb site that won't stretch beyond a 700-800px width.

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

Check out The man in blue for a great example of how to handle page size changes... http://themaninblue.com/experiment/ResolutionLayout/

查看蓝衣人有关如何处理页面大小更改的一个很好的示例... http://themaninblue.com/experiment/ResolutionLayout/

Update:I found a nice site that used some stats to determine what % of users can see what size screens: http://www.methodologie.com/webcanvas/

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

回答by scunliffe

The vast majority of users look at the Web in IE7 in a maximized window on a 1024x 768 screen and haven't modified their browser. So I found a guinea pig and took a screen shot. I assumed the taskbar was one row and visible--again, the default behavior--and got a window size of 1003 x 589. I'd use a live area of 960 x 560, personally.

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

回答by bobince

For what it's worth, XP IE7 users with the default width of sidebar open at full-screen XGA get a viewport width of 862px. Heights are not so important as we expect to scroll vertically, but having to scroll horizontally as well is death.

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

There are of course any number of reasons why this might differ from what is actuallyavailable, which is why we're all good web designers and use proper liquid layouts, don't we.

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

(What's that, stackoverflow? Really? Shocking, tsk.)

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

回答by Jimmy

I'm currently on a Acer netbook at 1024x600 screen resolution. Remember that we are a growing market segment! (or at least, try not to make your vertical real-estate assume 768 as a minimum screen height)

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

回答by Micah

This seems to be recent, thought I'd mention it, found it while scouring the interwebs...

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

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

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

回答by Nils Sens

The original question - despite that it was a good one! - as well as some of the answers are becoming increasingly out-dated as per 2014.

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

We now need to acknowledge the growing numbers of smart phones of different screen sizes, netbooks, iMacs with wide screens, retinas, (Android / Mac) tablets etc. etc.

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

Add to that that the divide between touch and tap is growing with the latter not being a rare occurrence any more.

此外，触摸和点击之间的鸿沟正在扩大，后者不再是罕见的事件。

We now need device-specific style with a tap-based UI for handheld devices with fixed browser sizesand fluid-responsive style with mouse-hover effects etc. for desktop computers.

我们现在需要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.

This should be the focus of discussion today.

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

In this sense, the answer to the orig. question can't be easily given any more. A very common 1024x768 screen could very well be an iPad - or a scaled down browser window.

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

回答by Nils Sens

Just thought I'd add that Shaun Inman's Mintstats app has a pluginthat tracks window size, rather than screen resolution, and takes into account worst-case browser chrome. It then groups the results as x% of visitors have window width >y%, or >z% height, which can be very useful for making informed decisions about a specific site, and takes some of the guess work out of the process.

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

回答by Simon_Weaver

i am on a Sony laptop WUXGA screen (1920x1200).

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

I have my taskbar on the lefthand side of the screen so minus the browser chrome I still have a pretty respectably usable 1831 pixels. usually find this is good for most uses.

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

I just wish stackoverflow woudl detect my wide screen and show me my answer preview in a right hand column.

我只是希望 stackoverflow 能够检测到我的宽屏，并在右手栏中向我展示我的答案预览。

回答by philfreo

1007px is the absolute maximum you get to work with in Internet Explorer (details) without horizontal scrollbars. But that said I think you should not go for the very maximum unless you need to. Rather, rely on the assumption that many people's browsers aren't maximized.

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

Google's Browser Sizeis a great tool.

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