logo标签列表

处理Web开发中多种屏幕分辨率和宽高比的策略

cssscreen-resolutionaspect-ratio
48

过去，设计的屏幕分辨率是800 x 600，可能还有640 x 480。然后出现了1024 x 768等等分辨率。

但问题变得更加复杂：现在不仅有不同的分辨率，还有不同的宽高比。

为了适应当今不断扩大的屏幕尺寸和宽高比范围，人们采用了哪些策略？

（顺便说一句 - 我只考虑笔记本电脑/台式机硬件，当然还有要考虑智能手机和平板电脑。）

谢谢 - 有一些很不错的答案。Alison提出了一个非常有趣的点（关于DPI），这对我来说是全新的（谢谢！），但Yi Jiang、Dave和Stefano给出了更接近我预期答案的回答。还有其他人有什么想补充的吗？ - Adrian K
我已经将100分奖励给了Yi Jiang，因为他对我的问题给出了很好的回答。感谢Alison提供的DPI信息-显然被许多人所欣赏 :) 谢谢所有做出贡献的人。 - Adrian K
6个回答
32

我知道这可能是一个有争议的观点，但我还是要说出来：不要

不要为多个屏幕尺寸或宽高比设计。当然，也有一些例外情况：像网络邮件客户端这样的重型 Web 应用程序肯定需要更大的屏幕空间，并且可能足够灵活，以适应大范围的屏幕尺寸。对于具有高移动设备用户量的网站，移动版本可以采用更灵活的设计以适应各种各样的移动屏幕大小。但是，如果您坚持所谓的“桌面 Web”，那么我认为在95%的时间里，屏幕尺寸、分辨率和宽高比并不是最重要的问题。

首先，让我们来解决容易的一个问题。我真的不明白为什么你会那么在意宽高比——我们现在已经不那么在意“页眉以下”的无稽之谈了，对吧？Web 是一种垂直媒体——滚动将永远是网站中不可或缺的部分。把所有内容都放在神奇的 600 像素线以上实在是太愚蠢了。

接下来，屏幕分辨率/大小：同样，我觉得很难为它辩护。

拥有大屏幕的用户通常不会将浏览器窗口最大化，因为他们发现大多数网站没有充分利用它们。虽然 Web 会适应用户，但用户也会适应 Web。尽管你可以认为这是个先有鸡还是先有蛋的问题，但事实仍然是网站通常是为了迎合最低公共分母而设计的。我并不是在支持这种立场，而是指出这是目前行业中普遍存在的趋势。

在分辨率过高或过低的情况下，某些内容是无法正常显示的。例如，在屏幕上阅读时，只有一定范围的宽度能够让人们感到舒适。如果宽度太长，那么眼睛移动到下一行的距离将会很麻烦；如果宽度太窄，文字则显得拥挤。因为Web旨在保持分辨率中立，所以对于希望构建自适应布局的人来说，实际上没有提供太多的支持。min-height和max-height当然会有所帮助，但是这种方法的应用范围越广，就会遇到越多的问题，如孤立元素、错位图像、背景图像超出范围等，这些问题在如今的技术下对于真正灵活的网站来说是不可避免的。

因此，我的观点是处理多种分辨率问题最简单的方法是完全忽略它 - 在如今的技术条件下，也没有太多的选择 - 并为最低公共分辨率设计。

我完全同意。说得好。 - Stephan Muller
1
"min-height和max-height肯定会有帮助的" - 我完全同意！ - Adrian K
“一小范围的宽度可以让人们在屏幕上舒适地阅读”，这是引发我问题的原因之一；如果我们限制（比如）内容区域的大小，难道这不会为利用更普遍的宽屏提供新的选择吗？既然有多余的空间，为什么要让用户向下滚动呢？这只是我想知道的一些事情 :) - Adrian K
@Adrian：因为没有明显的使用方式。当然，我们可以有更多的侧边栏，但主要内容必须始终保持相同的宽度。CSS3列可能会有所帮助，但强迫读者扫描整篇文章回到顶部甚至比让他向下扫描更糟糕。如果您希望导航元素始终可访问，您可以始终将它们position: fix。 - Yi Jiang
18

注意高DPI设置

我认为目前前端网页开发中最少被讨论的问题之一是在高DPI系统上进行测试。每个人都已学会在不同浏览器上进行反复测试，但设计师/开发人员尚未意识到要在不同DPI设置上进行测试。

高（甚至低）DPI设置可能会导致字体缩放而图像未能跟进（这种情况可能会发生），导致图像看起来模糊/不清晰，并且绝对定位的对象可能不会出现在预期位置（这对于CSS菜单来说是灾难性的）。如果没有其他选择，请将您的图像以高DPI进行测试并根据需要重新渲染它们。

这个问题直到Windows 7发布和人们购买高分辨率显示器的电脑后才成为一个问题。首先，Windows 7默认使用96DPI（这与其他一直使用72DPI作为标准的计算机世界不同）。此外，Windows 7将自动调整DPI设置，我已经看到过DPI达到正常值的150％（在Windows中，96 DPI）的用户。

这里有一个很好的链接，详细讨论了这个问题：http://webkit.org/blog/55/high-dpi-web-sites/

一个优秀的跨浏览器网站设计符合Web标准的目标，但不要忘记进行DPI测试。

1
有趣！你有处理这个问题的策略吗？我猜测试主要是一个简单的手动过程，只需要用眼睛观察即可？ - Adrian K
2
现在，知识是我能想到的最好的武器。尽可能多地搜索有关网页设计、CSS和DPI的信息。我更新了我的答案，并提供了一个讨论这个问题的好链接。 - NakedBrunch
1
啊，对了...我想这就解释了为什么我无意识地注意到我的Win7机器呈现的字体比其他Win机器更紧密。谢谢你指出来！ - Jonathan Day
请注意，您可以使用特殊的img标签，以便在高DPI时使用不同的图像尺寸。参考：https://dev59.com/hmUp5IYBdhLWcg3wf3us#43823483 - rogerdpack
12

好的，尽量保持回答不会太长，这是我的做法。

(A) 总是从最常用的比例/分辨率开始

如果普通人使用现代笔记本电脑或台式机，他可能至少有1024x768的分辨率 (参考: w3schools elykinnovation)，这给你大约可使用的960像素宽度（你可能要检查960grid system - 自我第一次写这篇文章以来，已经有很多新框架出现了）。 如果用户更可能从移动设备或平板电脑开始，先考虑它们。 如果是50%-50%，通常最好从小开始然后逐渐增加，例如 Rock Hammer 或 Foundation。

(B) 布局：自适应还是固定？

如果您的网站可以受益于更大的宽度，请选择一个自适应设计从这个分辨率开始。但要注意，人眼不喜欢阅读过长的文本行，因此不要滥用自适应设计；通常保持960像素和大的边距是可以接受的。 如果你真的有更多的空间，你可能想要添加（javascript）一些额外的侧边菜单。但尽可能设计你的网站能够在没有 JS 的情况下工作。

(C) 其他分辨率

最后，现在是时候检查一下，在使用最少的分辨率下是否仍然可以接受。

(D) 其他设备、比例和其他东西

不同比例的选择并不多；这通常意味着你正在使用移动设备、iPad、AAA或类似设备。

我的建议是...专门为这些设备设计。

在编写HTML时，请记住您将需要什么，并记住按语义而非设计来进行HTML。如果可以，请使用正确的HTML5语义标签。 避免使用<bold>或类似的标签，而是正确地使用您将用CSS样式化的标签和类。

使用框架！

但您仍然可以为非常不同的设备制作几种不同的设计。您不必在相同的设计中做出所有响应式/。

有几种方法可以根据客户端提供不同的CSS；您可以这样做：

  1. 服务器端，检查来自客户端的HTTP标题中的浏览器，无论是使用您的Web服务器还是您的动态脚本环境 - 无论是Python / Django、PHP还是其他任何语言
  2. Javascript（您可以轻松获取窗口大小）
  3. HTML - 特别是对于某些特定设备，如iPhone

通过遵循一些简单的规则，您可以轻松为小型（例如移动）设备制作通用设计： 1.流体布局能够适应非常小的宽度 2.紧凑的页眉/页脚不会浪费太多空间 3.每个“页面”只有少量清晰内容 4.避免:over效果，因为它们在触摸设备上无法使用!!!

如果您想更深入了解，您需要检查单个设备的自定义设置；一个例子是iPhone视口，请参见苹果参考库。
这只是为了让您开始。经验和特定需求将推动其余部分！
不客气！如果你有更具体的问题，请随时提问。要回答一个广泛的问题，很难不写几页内容。 - Stefano
这个回答听起来已经很过时了 :( 。事情已经有了很大的变化 - 特别是CSS框架。这里的一般建议仍然非常适用，但是（响应式）框架的大幅改进使得拥有更通用的基础更容易了。 - Stefano
5

你的网站无法在每个显示器上完美地运行。即使你有足够的时间（或者我应该说是年/十年）为每个可能的显示器设计，每次出现新设备时都必须重新设计。

在我的开发中，我仍然坚持避免水平滚动，而使用浮动div / 可变宽度div并不太难。但除此之外，我们真的处于“有一个专门的应用程序”十字路口，您需要为特定设备设计专门的显示器。

我使用的一种策略是减少对单个显示器的依赖-客户可能不需要看到您的整个网页才能完成他们要做的事情。您可以将功能解析为更小/更简单的网页，在不同大小的设备上更好地缩放。

在工作中，我有更多的“权力”，可以开发“设计运行的内部Web应用程序...某些特定的浏览器，某些特定的显示设置等-在自己的风险下使用其他配置”。这是在经过管理人员同意后才能实现的，花费额外的一周时间进行开发（甚至更多的升级/未来维护）只是为了取悦校园另一端那个拒绝使用IE的素食主义者并不值得成本。在这种情况下，我们需要另一个Timmy，而不是一个可以在他最喜欢的非IE浏览器上看起来不错的更灵活的Web应用程序。

1
“你的网站不可能在每个显示器上都完美运行…” - 我完全同意 - 所以你的策略（像我们很多人一样）是选择一个最佳点并为其设计 - 同时尽量避免做任何对其他人有害的事情（在实际可行的情况下）。 - Adrian K
4
+1 感谢Tathagata。我原本期望会有更多的对话，毕竟这不是一个晦涩的问题 :) - Adrian K
Adrian，看起来这可能不是讨论设计问题的最佳论坛 :) 但我不知道是否有更好的选择。也许Jeff/Joel应该为前端设计师/程序员创建一个单独的论坛。 - tathagata
我知道流体布局 - 而且我是个粉丝 :) 但这真的是最好的策略吗？ 我只是觉得，一旦涉及到大屏幕/多屏幕/宽屏幕，仅仅使用流体布局是不够的。 - Adrian K
Adrian，你说的是对的。实际上，很多也取决于你网站的上下文环境。从可用性角度来看，为不同分辨率创建单独的设计可能更好（当然还要进行美学改进 :))。 - tathagata
3
我认为响应式网页设计是你问题的答案。看看这些例子和技巧...响应式网页设计。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接