用于网络应用程序设计的网络安全区域（最佳分辨率）
我正在设计一个新的网络应用程序，我想知道我应该优化应用程序布局和设计的“网络安全区域”。我所说的网络安全区域是指可在浏览器中显示网站的实际区域（受显示器分辨率以及浏览器和操作系统占用的空间的影响）
我自己做了一些调查和思考，但想分享这是为了看看普遍的意见是什么。这是我发现的：
最佳显示分辨率：
- w3schools web stats 似乎是 最常引用的来源（但是他们 说明这些结果来自 他们的网站偏向科技 精明的用户）
- http://www.w3counter.com/globalstats.php （汇总来自类似的数据 15,000 个不同的网站使用其 跟踪服务）
- StatCounter 全球统计 >展示 分辨率（统计数据基于 收集的汇总数据 超过 15 的样本上的 StatCounter 每月收集十亿次综合浏览量 来自 StatCounter 网络 超过 300 万个网站）
- NetMarketShare 屏幕分辨率 (marketshare.hitslink.com)（a 网络分析咨询公司，他们 从网站浏览器获取数据 访问其点播网络的访客 实时统计客户。数据是 由大约 160 个 每月百万访客）
显示分辨率摘要：上述来源之间存在一些差异，但总体而言，截至 2011 年 1 月，1024x768 的比例约为 20%，而大约 85% 的分辨率更高至少 1280x768（1280x800 是其中最常见的，占整个网络的 15-20%，具体取决于来源；1280x1024 和 1366x768 紧随其后，占 9-14% 的份额）。我的猜测是，如果我们过滤北美，则更高分辨率的值会更常见，如果我们过滤北美企业用户，则分辨率值会更高（不幸的是，我找不到任何免费的地理过滤统计数据）。另一点值得注意的是，1024x768 桌面用户数量可能低于上述 20%，因为 iPad（1024x768 原生显示屏）可能会支撑这一数字。
我的建议是围绕 1280x768 约束进行优化（*注：1280x768 实际上是一个相对罕见的分辨率，但考虑到 1366x768 相对常见，而 1280 是最常见的水平分辨率，我认为这是一个有效的约束范围）。
浏览器+操作系统限制： 为了进一步增加限制，我们必须减去浏览器（假设 IE，这是最消耗空间的）和操作系统（假设 WinXP-Win7）占用的空间：
- Win7 的任务栏占用空间最大，高度为 40px（ XP 和 Vista 为 30 像素）
- 默认的 IE8 视图在屏幕底部的状态栏占用了 25 像素，在屏幕顶部的 Windows 标题栏和浏览器 UI 占用了 120 像素（假设默认的“收藏夹”工具栏）如果存在，则如果没有收藏夹工具栏，它将是 91px）。
- 假设没有滚动条，我们还为窗口轮廓水平释放了总计 4px 的空间。
这意味着我们剩下 583px 的垂直空间和 1276px 的水平空间。换句话说，Web 安全区域为 1276 x 583
这是正确的思路吗？
我尝试用 Google 搜索一些设计最佳实践，但大多数仍然谈论围绕 1024x768 进行设计，而这似乎很快就会消失。
对此的任何帮助将不胜感激！谢谢。
I'm in the process of designing a new web app and I'm wondering for what 'Web Safe Area' should I optimize the app layout and design. By Web Safe Area I mean the actual area available to display the website in the browser (which is influenced by monitor resolution as well as the space taken up by the browser and OS)
I did some investigation and thinking on my own but wanted to share this to see what the general opinion is. Here is what I found:
Optimal Display Resolution:
- w3schools web stats seems to be the
most referenced source (however they
state that these are results from
their site and is biased towards tech
savvy users) - http://www.w3counter.com/globalstats.php
(aggregate data from something like
15,000 different sites that use their
tracking services) - StatCounter Global Stats > Display
Resolution (Stats are based on
aggregate data collected by
StatCounter on a sample exceeding 15
billion pageviews per month collected
from across the StatCounter network
of more than 3 million websites) - NetMarketShare Screen Resolutions (marketshare.hitslink.com) (a
web analytics consulting firm, they
get data from browsers of site
visitors to their on-demand network
of live stats customers. The data is
compiled from approximately 160
million visitors per month)
Display Resolution Summary: There is a bit of variation between the above sources but in general as of Jan 2011 looks like 1024x768 is about 20%, while ~85% have a higher resolution of at least 1280x768 (1280x800 is the most common of these with 15-20% of total web, depending on the source; 1280x1024 and 1366x768 follow behind with 9-14% of the share). My guess would be that the higher resolution values will be even more common if we filter on North America, and even higher if we filter on N.American corporate users (unfortunately I couldn't find any free geographically filtered statistics). Another point to note is that the 1024x768 desktop user population is likely lower than the aforementioned 20%, seeing as the iPad (1024x768 native display) is likely propping up those number.
My recommendation would be to optimize around the 1280x768 constraint (*note: 1280x768 is actually a relatively rare resolution, but I think it's a valid constraint range considering that 1366x768 is relatively common and 1280 is the most common horizontal resolution).
Browser + OS Constraints:
To further add to the constraints we have to subtract the space taken up by the browser (assuming IE, which is the most space consuming) and the OS (assuming WinXP-Win7):
- Win7 has the biggest taskbar footprint at a height of 40px (XP's and Vista's is 30px)
- The default IE8 view uses up 25px at the bottom of the screen with the status bar and a further 120px at the top of the screen with the windows title bar and the browser UI (assuming the default 'favorites' toolbar is present, it would instead be 91px without the favorites toolbar).
- Assuming no scrollbar, we also loose a total of 4px horizontally for the window outline.
This means that we are left with 583px of vertical space and 1276px of horizontal. In other words, a Web Safe Area of 1276 x 583
Is this a correct line of thinking?
I tried to Google some design best practices but most still talk about designing around 1024x768 which seems to be quickly disappearing.
Any help on this would be greatly appreciated! Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
正如 Bigood 指出的那样，http://browsersize.googlelabs.com 已移至 Google Analytics（分析）。然而，观点也发生了变化。
一种更现代的方法是将网站设计为适应不同屏幕分辨率的响应式页面，而不是尝试创建具有固定的“最佳”尺寸的页面。 Twitter Bootstrap 是众多 CSS 和组件库之一，可帮助您更轻松地创建响应式网站。
此外，其他工具可以轻松测试不同分辨率下的网页响应。例如，Chrome 的开发人员工具现在允许开发人员模拟特定设备或手动设置特定屏幕尺寸，并合理了解网页在该分辨率下向用户显示的效果：
Internet Explorer 的开发人员工具允许您将浏览器的大小调整为预设或自定义的特定尺寸。
总之，如今，不存在“网络应用程序设计的网络安全区”。对移动设备与桌面浏览器共存的期望导致业界强调响应式网站，而不是那些设计有“最佳分辨率”的网站。
As Bigood pointed out, http://browsersize.googlelabs.com was moved into Google Analytics. However, perspectives have also changed.
Rather than trying to create a page with fixed, "optimal" dimensions, a more modern approach is to design Web sites as responsive pages that adapt to different screen resolutions. Twitter Bootstrap is one of many CSS and component libraries that make creating responsive sites easier.
Further, other tools make it easy to test Web page response at different resolutions. For example, Chrome's Developer Tools now allows developers to emulate specific devices or manually set specific screen dimensions and get a reasonable view of how the Web page will appear to users at that resolution:
Internet Explorer's Developer Tools allow you to re-size the browser to preset or custom, specific dimensions.
In conclusion, nowadays, there is no "Web Safe Area for web app design." Expectations for mobile devices coexisting with desktop browsers has led the industry to stress responsive sites over those designed with "optimal resolutions."
经过一番查看后，我发现了一个非常有用的网站，它可以向您展示您的网站在多种浏览器类型（和版本）以及不同操作系统上的显示方式：http://browsershots.org/
我上述思路的另一个警告是，不同的浏览器实际上根据它们运行的操作系统占用不同数量的像素。例如，在WinXP下，IE8在屏幕顶部占据142px（而不是前面提到的Win7的120px），因为文件菜单在XP上默认显示，而在Win7上文件菜单默认隐藏。所以看起来在 WinXP + IE8 上，网络安全区域只有 572px (768px-142-30-24=572)
再次，我真的很惊讶我在网络上的任何地方都找不到这种类型的“探索”网络。许多网站都在谈论针对 1024x768 进行设计，但这只是等式的一半！没有提到浏览器/操作系统对您必须显示网站/应用程序的实际区域的影响。
After a bit more looking around I found a really useful site that can show you how your website will appear on multiple browser types (and versions) as well as on different OS's: http://browsershots.org/
Another caveat to my line of thinking above is that different browsers actually take up different amounts of pixels based on the OS they're running on. For example, under WinXP IE8 takes up 142px on top of the screen (instead the aforementioned 120px for Win7) because the file menu shows up by default on XP while in Win7 the file menu is hidden by default. So it looks like on WinXP + IE8 the Web Safe Area would be a mere 572px (768px-142-30-24=572)
Again, I'm really surprised that I couldn't find this type of 'exploration' anywhere on the web. Lots of websites talk about designing for 1024x768, but that's only half the equation! There is no mention of browser/OS influences on the actual area you have to display the site/app.