1

我正在设计一个新的网络应用程序,我想知道我应该优化应用程序布局和设计的“网络安全区域”。网络安全区域是指可用于在浏览器中显示网站的实际区域(受显示器分辨率以及浏览器和操作系统占用的空间的影响)

我自己做了一些调查和思考,但想分享一下,看看一般意见是什么。这是我发现的:

最佳显示分辨率:

  • w3schools 的网络统计数据似乎是被引用最多的来源(但他们声明这些是他们网站的结果,并且偏向于精通技术的用户)
  • http://www.w3counter.com/globalstats.php (汇总来自 15,000 个使用其跟踪服务的不同站点的数据)
  • StatCounter 全球统计数据> 显示分辨率(统计数据基于 StatCounter 收集的汇总数据,样本来自 StatCounter 网络中超过 300 万个网站的每月超过 150 亿次网页浏览量)
  • NetMarketShare Screen Resolutions (marketshare.hitslink.com)(一家网络分析咨询公司,他们从网站访问者的浏览器中获取数据到他们的实时统计客户的按需网络。数据来自每月大约 1.6 亿访问者)

显示分辨率摘要:上述来源之间存在一些差异,但总的来说,截至 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 的任务栏占用空间最大,高度为 40 像素(XP 和 Vista 为 30 像素)
  • 默认的 IE8 视图在屏幕底部用状态栏占用 25px,在屏幕顶部用 Windows 标题栏和浏览器 UI 再占用 120px(假设存在默认的“收藏夹”工具栏,它会改为是 91px,没有收藏夹工具栏)。
  • 假设没有滚动条,我们还为窗口轮廓水平松动了 4px。

这意味着我们剩下 583px 的垂直空间和 1276px 的水平空间。换句话说,1276 x 583 的网络安全区域

这是正确的思路吗?

我尝试在 Google 上搜索一些设计最佳实践,但大多数人仍然在谈论 1024x768 左右的设计,这似乎正在迅速消失。

对此的任何帮助将不胜感激!谢谢。

4

2 回答 2

1

正如 Bigood 所指出的,http: //browsersize.googlelabs.com已被移入 Google Analytics。然而,观点也发生了变化。

与其尝试创建具有固定“最佳”尺寸的页面,更现代的方法是将网站设计为适应不同屏幕分辨率的响应式页面。 Twitter Bootstrap是众多 CSS 和组件库之一,可让您更轻松地创建响应式网站。

此外,其他工具可以轻松测试不同分辨率的网页响应。例如,Chrome 的开发者工具现在允许开发者模拟特定的设备或手动设置特定的屏幕尺寸,并合理地了解网页在该分辨率下对用户的显示效果:

Chrome 设备/分辨率模拟

Internet Explorer 的开发人员工具允许您将浏览器的大小重新调整为预设或自定义的特定尺寸。

总之,如今,没有“Web 应用程序设计的 Web 安全区”。对与桌面浏览器共存的移动设备的期望导致业界强调响应式网站而不是那些以“最佳分辨率”设计的网站。

于 2011-02-23T02:05:14.157 回答
0

再环顾四周后,我发现了一个非常有用的网站,它可以向您展示您的网站在多种浏览器类型(和版本)以及不同操作系统上的显示方式:http: //browsershots.org/

对我上述思路的另一个警告是,不同的浏览器实际上会根据它们运行的​​操作系统占用不同数量的像素。例如,在 WinXP 下,IE8 在屏幕顶部占据 142 像素(而不是前面提到的 Win7 的 120 像素),因为文件菜单在 XP 上默认显示,而在 Win7 中,文件菜单默认隐藏。因此,在 WinXP + IE8 上,Web 安全区域看起来只有 572px (768px-142-30-24=572)

同样,我真的很惊讶我在网络上的任何地方都找不到这种类型的“探索”。很多网站都在谈论为 1024x768 设计,但这只是等式的一半!没有提及浏览器/操作系统对您必须显示站点/应用程序的实际区域的影响。

于 2011-02-23T23:33:02.133 回答