我的网络应用程序应该针对普通非技术用户使用什么屏幕分辨率？答案

【问题标题】：What screen resolution should my web app target for an average non-technical users?我的网络应用程序应该针对普通非技术用户使用什么屏幕分辨率？
【发布时间】：2019-04-27 00:54:41
【问题描述】：

我注意到 StackOverflow 的目标屏幕分辨率宽度似乎为 1024 像素或更高。我还查看了针对更多非专业用户的 Amazon、NBC、MSN 和 AOL，它们似乎都针对相同的宽度。

1024px 是当前针对使用默认显示器分辨率/浏览器尺寸的最大横截面用户的网络应用程序推荐的宽度吗？

【问题讨论】：

我的屏幕宽度约为 1900 像素。我当前的浏览器窗口的宽度约为 1100 像素。您可能在这里使用了错误的假设。
如果您知道如何调整窗口大小，您可能会被认为是“复杂的”。
我根据约翰对他的意图的进一步解释，对措辞进行了一些编辑。

标签： user-interface

【解决方案1】：

使用流畅的布局。然后，您可以轻松地容纳从 ~800 到 ~1600 宽度的每个人，并且需要更多的工作和关心甚至更低分辨率的设备。这也让@1024 的用户在发现文本太小时有一些余地来缩放页面。

请记住，上网本之类的东西没有我们今天所期望的大屏幕。您可以摆脱水平滚动条，但如果您必须滚动页面只是为了获得正文的正文，那您就迷路了。

【讨论】：

【解决方案2】：

在听起来如此居高临下之前，您可能需要先了解一下现代用户群。上网本。掌上电脑。智能手机。智能本（您确实知道它们是什么，非常复杂，对吧？）。屏幕为纵向的程序员。并排堆叠窗户的人。售货亭。

更新根据与约翰的对话，我编辑了问题以稍微改变男高音以反映他的初衷。然而，我写的原始段落仍然是真实的——我没有看到最新的统计数据，但“90% 的用户在他们的浏览器上拥有 AxB 结果/窗口大小”的日子可能已经一去不复返了，宽屏笔记本电脑和移动设备。让 UI 设计师的生活更精彩:)

话虽如此，要开发一个真正可用的网站，您需要将流畅的布局与理想情况下使用 portlet 和门户框架（想想 My Yahoo）的能力相结合，这样人们就可以选择最适合他们的页面布局。

【讨论】：

“不成熟”一词旨在指出我的目标受众可能与阅读此问题的受众不同，而是更外行。这绝对不是为了“居高临下”，但如果你有一个更好的术语可以传达同样的意思，请随时编辑。
目前门户框架超出了我们的范围......但无论如何感谢。
1) 我有一个挥之不去的怀疑（目前尚未证实）YUI 可能会提供一个易于使用的门户。 2）我编辑了这个问题 - 请检查它现在是否有意义（我是 ESL，所以措辞可能远非完美）。
然而，我最初评论的实质是——我还没有看到最新的统计数据，但是“90% 的用户在他们的浏览器上拥有 AxB 结果/窗口大小”的日子可能已经一去不复返了，宽屏笔记本电脑和移动设备是什么。让 UI 设计师的生活更精彩 :)

【解决方案3】：

充分利用960.gs，您将设置创建一个好的网站所需的一切:)

_{（来源：balexandre.com）}

960 网格系统 旨在通过提供基于 960 像素 宽度的常用尺寸来简化 Web 开发工作流程。有两种变体：12 列和 16 列，可单独使用或串联使用。

960 GS 这是一个不错的开始，做网页或图片，他们有一个完整的模板，几乎适用于任何优秀的设计程序（Photoshop、Ilustrator、Fireworks、InDesign 等）以及 CSS generator和 Grid Overlay 来帮助您建立网站。

我使用它，它太棒了！查看demo

Nettuts 有 tutorial 和 video。 WooThemes 写了一篇题为“我们为什么喜欢 960.gs”的 post，并将其作为他们 WordPress 主题的起点。讲西班牙语的人也可以查看 Jepser Bernardino 和 Miguel Angel Alvarez 的教程。

【讨论】：

Blueprint 是另一个基于相同概念的 CSS 框架。我们在 PostRank.com 上取得了很大的成功
我确实更喜欢 960.gs 而不是 BP，更多的模板，更干净和简单:) 好吧，至少对我来说，呵呵。
来自@nitebrain 的回答：我认为 960 是对预期 CSS 设计原则的滥用。它确实有效，但是将您的标记嵌入到您的内容中也是如此。如果我错了，请纠正我，但我认为 CSS 的目的是将内容与布局分开，使用描述性 CSS 标签来描述内容的“内容”。 960 所做的就是使用标签来描述布局，因此在内容中嵌入了布局信息，这似乎与 CSS 的整体理念背道而驰。也许我错过了 CSS 或 960 的要点。如果你认为我很困惑，请提供反馈。
每个人对每件事都有自己的看法，我尊重你的看法，但我宁愿使用 960 或 BluePrint，也不愿从头开始做所有事情 :) 顺便说一句，如果这对你很重要，你可以随时更改标签： )
这就像过去那些无法理解 CSS 的网页设计师使用表格来布局 html 元素......

【解决方案4】：

不成熟？我认为这是描述未洗过的群众的一种粗鲁方式。我想现在每个人和他们的狗都有一个 1024 像素宽的显示器，这要归功于戴尔和其他公司……

【讨论】：

并称他们为“未洗过的”不是吗？ ;)

【解决方案5】：

我认为定位为“基础”的最大尺寸是 1280x1024，但我更有可能选择 1024x768。

也就是说，在我目前的项目中，我尝试使用最小宽度为 800 的流动布局来适应上网本，通常最大宽度约为 1000 像素（通常为 970）。当然，我也有为自己设计的奢侈，所以我有幸告诉 IE6 用户他们应该升级，这使得流动布局更容易设计。

【讨论】：

【解决方案6】：

总结：

将浏览器的内部尺寸设置为 1250x668，以满足 92.7% 的用户。

我喜欢以统计数据为导向。为此，W3Schools 有一个很好的 Browser Display Statistics 页面，他们会定期更新该页面，提供有关每种屏幕分辨率的常见程度的新统计数据。

截至 2015 年 1 月，访问 W3Schools 页面的浏览器中有 92.7% 连接到大于 1024x768 的显示器，但所有显示器中有 39.3% 的高度限制为 768 像素（或更低），主要是因为其中 33% 1366x768 显示器。

不幸的是，W3Schools 测量的是屏幕分辨率，而不是用于呈现网页内容的内部尺寸。如果能获得用户 window.innerWidth 和 window.innerHeight 的统计信息，那就太好了。

因为我们没有这些，所以我们必须为可能比我们自己更大的窗口装饰以及可能进一步占用用于呈现网站的空间的浏览器小部件预留空间。此外，并非所有用户都使用最大化的网络浏览器浏览网络，但我认为如果我们假设低分辨率显示器将使用最大化的浏览器，我们可以忽略这一点。

Windows 7 似乎是占用屏幕空间的最大罪魁祸首，我测量的任务栏为 30-40 像素（我不得不搜索屏幕截图，因为我不运行 Windows）。带有标题栏、菜单栏、书签工具栏和状态栏的 Firefox 又占用了 159 像素，而更纤薄的现代 FF 仅占用了 64 像素。让我们使用 slim 版本并假设大约 100px 的垂直空间会丢失。最大化的浏览器似乎不会消耗任何额外的水平空间，因此您实际上只需要考虑滚动条，但我会为窗口边缘保留一些像素以防万一，使我们达到 30 像素。

几年前（当时我做的网页设计比现在还多），我将自己的浏览器调整为 inner 800x550 大小，并确保大多数页面不会滚动酒吧。如今，它看起来可以扩展到大约 1250x668 的 inner 大小。

您可以通过将其放在您的地址栏中来检查您的内部尺寸：

javascript:alert(window.innerWidth + "x" + window.innerHeight)

这些值是只读的；你曾经能够运行这样的东西来调整你的内部尺寸，但是（感谢滥用广告商）it no longer works：

javascript:window.resizeTo(window.outerWidth-window.innerWidth+1250,window.outerHeight-window.innerHeight+668)

分页说明：假设您假设某个大小并不意味着您不应该确保您的网站仍然可以在较小的分辨率下运行。页面可能很丑，但它必须是功能性的！

【讨论】：