为什么大多数网站都经过优化以纵向模式查看？[关闭]

我根本无法弄清楚。几乎所有显示器的宽高比都比宽度大得多，而几乎所有网站的设计都是恰好相反。我不是真正的Web开发人员，目前只是在尝试一些东西，但是这种疯狂使我感到困惑！！！

编辑：重点不是我想限制网站的高度。关键是当我将1920x1080设置为横向模式时，我希望它以某种方式填充所有可用空间。

编辑2：看到此以了解我在说什么

到达当前行的末尾时，眼睛可以扫描多远而又不丢失下一行的位置是有限制的。关于最佳线宽和可读性，已经进行了许多研究（包括此研究）。

您可能可以将其归结为一定程度，但是要知道此时的最佳状态，您需要知道用户离显示器有多远。这就是为什么大多数建议都针对以ems，字符或单词进行测量的原因。然后，以像素为单位的大小取决于字体的大小，但是一般的共识仍然有效。

如果将文章格式化为使用1080p屏幕的整个宽度，我个人将很难阅读文章。我相信你也一样。我们当前的约定源自印刷版式设计指南，并且版式指南没有实质性改变。唯一的区别是我们可以在浏览器中与页面进行交互。

补充评论：（来自评论中提出的问题）

HTML在屏幕上可以为您执行的操作存在一些限制。一方面，没有页面。仅滚动条。针对浏览器应如何显示标记设计合理的行为是一个非常困难的提议。多列布局的CSS3属性还没有超出候选推荐阶段。除本文之外，还有本文介绍的一些技巧。但是，在大多数网站上，黄金时间还没有准备好。

只要您的内容不需要滚动，就可以了。一旦做到这一点，多列方法就可能给用户如何与站点交互带来一些挑战。

关于现行实际标准的评论：

为了解决您用疑问表达您的问题的方式以及您提供的示例，请理解，网页设计必须平​​衡许多可能相互矛盾的要求，同时还要保持网站的专业性。为了平衡设计人员和客户的需求，大多数开发人员将设计方案设为一种分辨率。该分辨率基于可随时 获得的数据。它们也可以基于历史Web流量记录或目标环境的知识。

最常见的屏幕宽度（1024、1280、1366）足够接近，因此，如果您设计最小的屏幕宽度（1024p），并将设计放在页面的中央，则在其他稍大的水平尺寸上，它仍然看起来不错。这是很难得到的一切右对齐的任何格式，更要支持取决于屏幕宽度多种格式。1080p用户的数量正在增长，但是在他们必须支持的所有人中仍然占很小的比例。

如果您有兴趣，我强烈建议您仔细阅读“ A List Apart”上的一些设计文章。您将开始认识到，做自己想做的事情比看起来要困难得多。当我发布有关1080p设计的问题时，最初的最初回答是“使一切变大”。对于大多数网页设计师来说，这还没有被广泛关注。

大多数网站都比较高，然后又很宽，因为您可以自然地向下滚动以阅读更多内容。我个人讨厌水平滚动条。他们应该被废除！

网站仍然是纵向的，该网站超出了屏幕的底部。站点的高度没有限制。

现在有无限长的网页（谢谢，AJAX），如果看到无限宽的网页会怎么办？（我会搜寻并杀死设计师，单击离开页面还不够好，设计师必须死掉。）

滚动然后返回每一行将导致自杀。这就是为什么人们制作精美的书籍，例如翻页应用程序，因此您不必滚动浏览的原因。

阅读之前的答案后，我注意到缺少一些要点，因此我将尝试描述这些要点。

困难的列实现

当您谈论宽版纸时，我想象您是在谈论文本列，就像在“物理”报纸上看到的一样。这有两个问题。

首先，实际的HTML 4和XHTML 1.0 / 1.1并不是要在列中显示文本。有针对Firefox（可能还有其他常规浏览器）的黑客工具，但在Internet Explhorror中无法使用。

其次，在实际的Firefox实现中或在将来的HTML 5中，如果必须在列中显示文本，则必须指定列的宽度和列数。不能指定高度（例如，将页面的高度减去页眉的高度和页脚的高度），然后让浏览器调整列数。

这使得几乎没有水平滚动条而没有垂直滚动条的列几乎没有可用的布局。

没有100％的高度

实际的HTML / XHTML旨在根据页面的宽度调整元素的大小。使用页面高度进行度量非常困难。

这意味着您将必须使用JavaScript技巧来正确显示内容。换句话说，对于未启用JavaScript的用户，您的网站将完全无法使用。

半屏浏览

在大型16：9/16：10屏幕上，并排使用两个窗口（在Windows 7中为Win+ ←/ Win+ →）并不罕见。这意味着浏览器窗口将具有较小的宽度和较大的高度。

固定宽度与动态宽度

您认为大多数网站已针对纵向模式进行优化的假设可能是错误的。

首先，大多数网站根本没有经过优化，通常由对Web开发一无所知的人编写。

其次，宽度固定的网站与宽度等于浏览器窗口宽度百分比的网站之间存在差异。

在第一种情况下，您可能会注意到大多数网站都没有针对纵向或横向模式进行优化。通常，宽度固定为1024、800或更小，在分辨率为1920×1080的24英寸屏幕上观看时，这没有任何意义。

在第二种情况下，如果您在24英寸屏幕上以全屏模式查看页面，则该网站有可能以纵向和横向模式正确显示。

示例：想象一个有照片画廊的网站。在页面上有缩略图，当您单击缩略图时，您会看到一张完整的照片。如果缩略图是左浮动的，并且具有页面的动态宽度，则它将在横向模式下很好地显示。看到完整比例的照片会特别好。

为什么现代显示器采用横向模式？

1. 影片格式。高清视频将更好地缩放以用于横向显示。
2. 阅读。无论是从左到右还是从右到左，当以横向模式定向时，它都易于阅读大的完整行块，而无需任何滚动。

编辑：在审查了您的评论并重新定义了原始问题的意图之后，似乎您出于某种原因而针对了当今最常见的两列和三列布局。为此，简要介绍一下网站历史：

为什么优化了网站以纵向模式查看？

我认为他们根本没有为此进行优化。在某些方面始终可用，某些方面经常可用以及某些方面仅在特定上下文中可用之间通常是折衷的。充其量，您可以称之为最佳折衷方案。

能够在每个页面中放置特定于上下文的内容以及核心，预期的导航和辅助内容，这就是为什么两列和三列布局如此普遍的原因。在网络的早期，许多站点都在尝试使用动态导航列表（或菜单，但是您希望看到它们）来提供试图以单列布局显示的布局，这会隐藏自身并扩大阅读范围。主要内容。但这是两部分的挑战：a）缺乏跨浏览器兼容性的技术挑战；b）可用性：即使克服了技术挑战（即使很大），也经常被用户视为不直观或不必要的狩猎（导航）和破坏游戏（体验满意度，因为某些解决方案修改了默认的上下文行为）鼠标点击）。

为了克服这个问题，大多数站点都采用了事实上的标准，并接受了后果。要么在其中一列中显示导航，在另一列中显示内容，要么添加第三列，以便始终显示次要的，非核心的导航内容（无论其上下文相关的帮助，注释或广告，还是最近的通信流，显示真实的人与网站或上下文相关的活动）。上下文的实际内容停留在中间。

这称为固定宽度布局。有全宽布局，也称为流体布局。使用固定宽度是有原因的。一种是显示器的分辨率会影响可用性。如果您有一个像我27英寸显示器那样的大型显示器，该网站将看起来非常恐怖。所有文本，图片和所有内容都会如此分散，这将使我很难掌握布局或网站。固定布局允许精美的设计。流畅的布局主要用于网站的列表或数据类型。例如，eBay在其列表中使用流畅的布局是因为它提供了更好的体验。论坛也可以从流畅的布局中受益。但是博客，创意，照片，或商业网站从固定宽度的网站中受益更大。

我不确定，但是我猜想大多数打印的“文档”都是以纵向打印的，许多人仍然将网站设计为“文档”-这可能是文化上的事情吗？另一个可能的解释是显示器宽度的变化大于显示器高度的变化。

我认为通常不建议在长时间未见活动的线程中发布答案。但是，我感到有些相关的事情尚未被提及。

首先，让我提及我几个月前发现的以下Firefox扩展：专栏阅读器

https://addons.mozilla.org/zh-CN/firefox/addon/column-reader/

为什么我们垂直滚动？

为了进行比较：考虑用垂直列编写的语言。对于像这样的语言，当前的宽屏监视器是理想的。这就是它的工作方式：垂直于线条方向滚动。书页采用纵向格式，因为我们的线是水平的。

如先前的答案所指出：浏览器的布局引擎的重排功能已调整为垂直重排。

多列能力

浏览器的开发团队可以选择通过以下方式添加多列功能：首先将整个页面呈现为单列，然后将其切成具有可用窗口空间像素高度的条带，并在侧面显示这些条带-并排。但是，您将这些列做成多宽？即使实际文本使用的宽度很小，通常页面代码也会在可用窗口空间的整个宽度上使用特定的背景色。
然后，渲染引擎必须安全运行，并将整个水平空间分配给单个列。

网站设计人员是否有可能实施回流的多列布局？
这将带来严重的困难。您必须获取可用窗口空间的高度和宽度，并在Javascript中将条带切割和排列为列。然后，您必须决定如何处理切成两半的图像。

布局引擎要做的就是处理这种事情。尝试创建有助于重排多列布局的Javascript库是在Javascript中创建渲染引擎。这将创建一个平台平台。

显示器尺寸

我发现令人沮丧的是，实际上计算机显示器在最近几年中已经缩小了。大型显示器的高度为1200像素，如今只有1050。是的，它们更宽，但是对于无法利用空间的文本而言。

同样，在纵向方向上，这些监视器太窄。
我有一个双显示器设置，两个显示器均为纵向放置，两个显示器均为1200x1600px。对我来说，这1200像素是最小的。

CSS中的条件语句

关于固定宽度布局的说明。

我喜欢CSS命令，该命令允许Web设计人员在避免滚动条和保持可读性的情况下适应较大的宽度范围：“最大宽度”。（有四个命令，例如：最小宽度，最大宽度，最小高度，最大高度）。对于包含文本的div，请指定最大宽度，例如65em。

你得到一个if / else。
如果可用空间小于65em，那么将相应地重排文本：无水平滚动条如果可用空间大于65em，则将包含div设置为65em。

宽屏显示器实际上仅在最近两年才开始普及，它们曾经是价格更高的选择。

从设计角度来看，人们一直认为网页（文档）要花很长的时间，以使用户不得不向下滚动比由于某些原因而使某人向上滚动要好得多。首先，这是大多数计算机文档倾向于工作的方式，因此这是一种更为“正常”的模式。您有向下翻页键，但没有跨页键。其次，这几天我们已经有了几乎无处不在的鼠标滚轮，因此向上/向下滚动是一个非常容易的活动，比滚动浏览要容易得多。

最后，您如何选择想要达到的宽屏分辨率-我的桌面为1920x1080；我的笔记本电脑是1440x900。您要设计哪一个？

尽管当今大多数显示器都是横向摆放的，但是您还必须考虑到，在设计网站时，您无法确切知道观看者将使用哪种屏幕分辨率。仍然有15％的互联网用户使用宽度小于等于1024的屏幕分辨率进行操作。在您不得不滚动查看信息之前，这没有太多的水平扩展空间。另外，有些用户不会在完全最大化的窗口中浏览互联网。解决此问题的唯一方法是开发基于浏览器窗口大小动态的设计。如果您曾经尝试过执行此操作，除非绝对需要这样做，否则您将很犹豫再次尝试它。如已经提到的，还有许多其他原因具有较小的宽度。

原因有很多：

• 传统上，大多数文本文档都是纵向比例，因此网络保留了该比例。

• 阅读较短的文本行比较容易。我没有引用，但这是一条非常常见的设计建议，以至于成为标准而非指导。

• 支持狭窄的设计更加灵活。我希望将浏览器的窗口仅显示到宽屏显示器全屏的一半，并在其旁边放置其他内容（通常是文本编辑器或其他浏览器窗口）。只是因为我可以有一个网页是1920-像素跨越并不意味着我总是希望它是。对于我将如何（或应该）查看其页面的任何假设，Web设计人员实际上有点冒昧。让我回想起“我最好在IE6上以800x600观看此页面”这一错误的倒叙。

• 更好的选择是可以缩放到任意宽度的液体设计，而CSS则可以使它很好地适用于文本（大多数情况下，在大多数现代浏览器中）。但是图像，嵌入式视频，Flash和其他现代嵌入式对象始终会在无需大量工作的情况下将这种设计搞砸。考虑到需要花费较长时间才能完成的灵活缩放设计与经过尝试的真正的窄固定宽度设计之间的选择，很多人会选择更简单（更便宜）的路径。

• 最灵活的选择是像iGoogle这样的用户可调整的Web部件画布。然后，您的文本可以根据您的需要而变宽或变窄，并按需要排列文本和图像块。现在，我想让您想象一下，您访问的每个站点都需要进行自定义，然后才能对其进行可读的噩梦。

目前，网站的Web设计标准将以960px宽开发，以适应1024px以上的屏幕分辨率（无水平滚动条）。这是最低要求，因为并非每个人都使用新的24英寸显示器。（认为​​平板电脑和上网本是分辨率较低的新硬件）

您应该记住，网站设计的分辨率会受到目标受众的影响，并应进行相应调整。

同样，在可用性方面，文本行的宽度应在11到14个字左右（如果您调整行高，则可以更多），因此并非所有网站都能处理流畅的设计。

最好的情况是，如果您不想让访问者感到内容区域之外的页面不为空，则可以添加纹理/颜色条纹，这些纹理/颜色条纹可以扩展到超出用户屏幕的大小并适合用户的屏幕大小。（就像http://www.cnn.com/上的，它仅适用于标题，但您可以在整个页面上使用它）

为什么大多数网站都经过优化以纵向模式查看？

当横向也是理想的选择时，为什么还要以纵向模式打印纸张？

正如许多人所说的那样，阅读大量的短行比阅读两三个长行要容易。

除此之外，如果您要用内容填充1280 * x像素，则网页将混乱不堪，没人知道需要解决什么问题。网页应执行特定任务，而不是每项任务。

Web 2.0趋势教会我们在页面上放置较少的信息，并使号召性用语清晰明了。这种普遍接受的设计理念与您所建议的完全相反。

开发1024分辨率有很多原因，但是我认为混乱因素是更重要的因素之一。

我注意到您使用的是Windows 7，因此答案是： Win +←

不过请特别注意：垂直优化网站的主要原因是，使用CSS编写静态宽度的布局更容易，并且可以在多个平台上使跨浏览器看起来正确。偶尔会使用流体宽度，但它们不会使其易于阅读。

看电影或玩游戏时，最好将所有水平空间都用光，但是阅读时，您实际上只需要一小段文字，这样眼睛就可以自然地扫视而不需要转动头部。在网页的左侧和右侧添加更多废话会分散页面主要内容的注意力，因此许多设计师只是将其留空以具有吸引人的空白。

另外，仅仅因为您拥有一台漂亮的显示器并不意味着大多数人都拥有一台漂亮的宽屏显示器。google的browsersize是检查版式大小的绝佳资源。

您的显示器方向错误。程序员的监视器应纵向（横向）而不是宽（横向）。