65.9K
CodeProject 正在变化。 阅读更多。
Home

Internet Explorer 10上的HTML5 Pulse——一款面向现代Web的现代应用！

HTML5 合作伙伴
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2013 年 2 月 13 日

CPOL

11分钟阅读

viewsIcon

21142

Internet Explorer 10上的HTML5 Pulse——一款面向现代Web的现代应用！

30 天开发一个 Windows 8 应用

网络日益丰富和沉浸，我们意识到对于我们的业务而言，超越应用本身对于拓展与客户的联系至关重要。虽然我们的应用将继续提供出色的设备体验，但将我们卓越的新闻平台开放给全球数百万人是一个自然而然的进展。

像许多从创建应用起步的公司一样，我们理解在网络上扩展应用的机会，但需要确保网络体验能够支持像我们这样丰富、互动且精心设计的应用。当我们开始这个项目时，我们不认为在网络上提供如此丰富的体验是可能的，但我们很快就学到了相反的经验。迄今为止，网络上的触控体验远非出色，仅限于基本的滑动命令，并且受限于只提供基本用户体验功能的应用程序开发模型。

在研究我们的选择时，我们很快意识到如果我们想把这件事做好，Internet Explorer 10 确实是最好也是唯一的选择。我们不确定这是否真的有效，老实说，我们有点怀疑。但在与 IE 团队和 Pixel Lab 的开发团队交谈后，IE10 所能带来的东西令我们大为惊叹。

网络的未来确实是应用加网络，我们为迈向未来的第一步感到自豪。因此，本着推动网络发展的精神，我们很高兴不仅分享我们的故事，还分享在此过程中制作的一些有用的代码片段。

随处可读

响应式设计

Pulse 的使命？无论您身在何处，都能获取新闻。对于网络而言，这意味着在任何设备和任何屏幕上都能获得出色的体验，而这涉及到许多截然不同的屏幕。幸运的是，HTML5 和 CSS3 中新兴的功能使这个大胆的目标成为可能。我们想要一个单一的“响应式”代码库，能够适应其使用环境，坦率地说，我们对这有多容易感到惊讶！

是什么让这个过程如此顺畅？毫无疑问，这主要归功于现代网络令人印象深刻的功能、社区驱动的最佳实践以及紧跟创新步伐的浏览器。另一方面，一些明智的选择也产生了很大的影响。以下是我们从一开始就做对的一些事情以及我们如何以最少的工作“孵化”一个响应式网站的注意事项

媒体查询

媒体查询是使响应式网站正常运行的神奇酱料。有很多很棒的概述，所以我们将其浓缩为一句话：媒体查询让您可以编写只有在满足特定条件（如屏幕宽度或高度）时才“激活”的 CSS。对于 Pulse，我们基本上只需要一个媒体查询规则。它看起来像这样

@media screen and (max-width: 640px) {
    /* our small-screen rules go here */
}

我们从希望为每位访问者提供相同基本功能中受益，因此网站完整版和移动版之间的变化主要与布局和大小有关。这使过程变得简单。一旦我们设置好媒体查询，我们只需添加定义这些变化的补充 CSS。您实际上可以在任何桌面浏览器中通过将浏览器调整到小于 640 像素（或将鼠标悬停在下面的图像上进行预览）来看到这一点。

 

响应式 Javascript

媒体查询完成了 95% 的工作，但也有一些新的代码驱动交互，我们只希望在小屏幕上启用。其中一个例子是显示或隐藏左侧来源菜单的新交互。在完整版中，菜单始终存在。在移动版中，您只有在点击标题中的任何位置后才能看到它。我们只需要一点点 Javascript 就能实现这一点。

不幸的是，媒体查询是一个 CSS 概念，在脚本中没有直接等价物。我们不得不自己创造。我们首先考虑了一些允许您在 Javascript 中构建类似媒体查询功能的库（ensuire.js 是一个热门选择），但最终我们意识到我们的需求非常少，可以通过简单的窗口大小检查来实现。

$(window).resize(function () { 
    isMobile = ( $(window).width() <= 640 );
});

Em 单位

Em 单位似乎每隔一年就会在开发人员中受到青睐或冷落。如果这是一个新名词，这里有一个快速版本：“em”是一种测量单位，就像像素或英寸一样。Em 单位有趣的地方在于它们总是相对于本地文本大小而言的。事实上，“em”之所以这样称呼，是因为传统上它是由大写字母 M 的宽度定义的。幸运的是，在实践中，它更容易预测。在 CSS 中，一个 em 等同于当前的磅值。因此，16 磅字体中的“1em”将是 16 磅。

Em 单位可能有点令人困惑，而且它们的“级联”特性可能使其难以使用。因此，大多数时候我们（像许多开发人员一样）坚持使用像素值来定义字体大小、边距和距离。对于 Pulse 来说也是如此，但有一个很大的例外：文章查看器。当您在 Pulse 中阅读时，您看到的是纯粹由 em 驱动的排版。该视图中的所有字体、边距和其他距离都定义为相对 em 值。

我们最初这样做是为了方便管理用户的字体大小偏好，但事实证明，这对于我们的响应式网站来说也是一个重要的举措。对于移动设备和 Xbox，我们都希望调整文本的相对大小。在移动设备上，人们习惯于近距离观看，并且通常希望屏幕上有更多的像素。在 Xbox 上则恰恰相反。Em 单位赋予我们灵活性，可以通过调整一个值（向上或向下）来根据用户的环境进行这些修改。高 DPI

创建响应式网站时一个容易被遗忘的方面是处理高分辨率和高像素密度的显示器。对此有许多策略，它们解决的问题也同样多样，但这里是我们使用的两步方法

第 1 步：声明您的坐标系（视口）

随着现代显示器变得越来越“像素密集”，您不能再指望设备上的像素与您在代码中指定的像素之间存在 1:1 的相关性。这过去仅仅是移动设备的一个考量，但最新的桌面和平板电脑浏览器也变得“高 DPI”感知。

如果您不挑剔，浏览器会为您做出一些决定。它的工作原理是这样的：如果您不做任何操作，大多数浏览器会假设您希望您的网站在桌面浏览器上工作，因此它们会以桌面尺寸（例如 1024 像素宽）渲染网站，然后将其缩放到设备像素（例如 480 像素）。这意味着您称之为“1px”的，浏览器称之为 480/1024 或大约 0.46px。困惑吗？在这种情况下，您无需困惑。您可以假装您的网站以桌面尺寸渲染，浏览器会完成其余的工作。

在小尺寸下需要更多控制变得越来越普遍（Pulse 的情况就是如此）。许多移动浏览器为您提供了实现此目的的方法，您可以使用视口元标签指定您网站的偏好。例如，假设您希望网站的内容始终以 320 像素宽的方式渲染。您可以使用这样的标签

<meta name="viewport" content="width=320">

这类似于我们之前描述的默认行为，但我们不是使用默认大小 1024 像素，而是指示浏览器以 320 像素渲染内容。另一种常见的做法是指示浏览器只使用设备的实际像素。为此，您可以使用这样的标签

<meta name="viewport"
    content="width=device-width">

这指示浏览器以设备本身的原始分辨率渲染内容。换句话说，使用实际像素！嗯，差不多吧。在实践中，大多数设备将其解释为使用“自然”像素。高密度屏幕上的像素可能比传统像素小得多。通过使用“width=device-width”，您是在说让 1px 感觉就像 1px 应该有的样子（即使那个 1px 物理上由更多像素组成）。

这就是我们为 Pulse 所做的事情。这是一个很好的方法，因为 1px 在每台设备上最终都意味着大约 1px。这省去了很多猜测。

第 2 步：使用高 DPI 图像

一旦您找到了视口，下一步就是使用高 DPI 资源。在高分辨率屏幕上，传统分辨率的图像可能会出现像素化或模糊。

处理这个问题有几种策略，坦率地说，这仍然是一个相当新的问题（但随着新设备和操作系统开始采用高 DPI，它变得越来越重要）。我们在 Pulse 上很幸运。由于其简单的外观，应用程序中的大多数 UI 图像都以单色图标的形式出现。虽然我们可以为每个图标（及其所有状态）创建高分辨率图像，但我们选择采用不同的方法：图标字体！

图标字体就是这样：一种包含图标而不是字母的字体。我们喜欢这种方法，因为它非常紧凑，具有矢量图像的所有优点，得益于许多浏览器精细的文本渲染，并且还具有 CSS 样式带来的惊人灵活性。毕竟，从浏览器的角度来看，它只是文本。最终，我们拥有一个单一的图标字体，其中包含从箭头和社交图标到标志的所有符号。扩展

在我们为小屏幕准备 Pulse 的同时，我们也有机会在适用于 Xbox 的 Internet Explorer 上预览该网站。该网站完美运行！事实上，它运行得非常出色。经过仔细评估，我们发现了一些小的调整，但即使这些也只是改进：我们对某些颜色进行了调整，以适应电视显示，并略微增加了某些文本，使其更容易从更远的地方阅读。但仅此而已。否则，该网站完美运行！

前卫布局

为网络构建 Pulse 带来了大量的技术和设计挑战，但其中最有趣的一个是主页的布局。我们一直坚持“内容优先”的设计方法——尤其是在主屏幕上——我们希望将其带到网络上，用内容填充屏幕，并通过大图像和边缘到边缘的内容创建一种杂志般的浏览体验。

这在任何地方都可能是一个艰巨的设计挑战，但在网络上尤其棘手。我们意识到我们需要一个布局引擎，能够智能地处理各种设备和屏幕尺寸：从移动设备上的 4 英寸屏幕到 30 英寸显示器上的全屏浏览器。

除此之外，我们还希望 Pulse 主屏幕保持智能和精心策划，这又给我们的布局挑战增加了另一个维度。我们真的希望在内容如何放置在屏幕上的决策中保持“人性化元素”。

Tiles.js

这些需求的交叉点变成了 Tiles.js。它是一个我们专为 Pulse 构建的模板驱动的基于平铺的布局引擎。我们使用模板，以便您可以严格控制布局的细节，然后由布局引擎微调大小并确保我们填满屏幕的边缘到边缘。

 

定义模板

Tiles.js 使用起来非常简单（甚至很有趣！）。我们首先需要的是一种简单的方法来定义布局。我们尝试了几种选项。我们最初的尝试易于解析但难以编辑或阅读，我们很快意识到如果模板能够以视觉方式传达布局，它们将更有用。

我们最终得到的东西（我们事后才意识到）与 CSS 网格提案之一的语法相差不远。它看起来像这样

 

它的工作原理是：模板是一个字符串数组，其中每个字符串代表网格中的一行。我们解析该数组，并在相邻单元格中检测到重复字符时形成一个“瓷砖”。

因此，在左侧的例子中，A 构成了 2x2 的瓷砖，B 构成了 1x2 的瓷砖，C 构成了 2x1 的瓷砖。您可以使用几乎任何您想要的字符，但我们习惯上使用大写字母作为约定。

句点是特殊的。它们被保留，总是表示单个单元格。所有空格都被忽略（事实证明，如果您稍微填充字符，它们会更容易阅读）。

HTML5 视频资源

© . All rights reserved.