如何完美打造Win8 Metro版IE10浏览器页面（转）

Windows8 内置两种 Internet Explorer 10 (以下简称 IE10)，一个是在桌面环境下使用的 IE10：视窗操作、可以支持各种插件(ActiveX)；而另外一个则是在新的开始画面中的 IE10 (称作 Modern IE10)：它无边框、更适合触控操作、以及整合 Win8 的各种新功能特色。这篇文章将为网页开发人员介绍，如何为 Win8 Modern IE10 打造完美网页。

Internet Explorer 技术展示网页

目录

1.使用 HTML5 相关技术

2.运用 CSS3 作样式设计

3.关于 Flash 支持

4.适应浏览模式Landscape 或 Portrait 模式

snapped 模式或 fill 模式显示

为触控操作优化友善表单输入

5.触控及手势操作

6.融合于 Windows 8

分享网页内容

固定网站及跳跃清单

与 Windows 应用市场结合

使用 HTML5 相关技术

IE 自从 IE9 开始大量支持 HTML5 等相关新技术，到了 IE10 更加完整，原本必须要靠插件 (plugins, ActiveX 等) 或是图片技巧所做出来的效果，现在大部份都能以 HTML5 相关技术实作出来。比如说：

1.影音文件可以使用 <video> 及 <audio> 标签来播放

2.若要 2D/3D 绘图，可以使用 <canvas> 标签以及 SVG 来搭配使用

3.文件操作可以使用 File API

4.进阶的 AJAX 操作 (如:文件上传) 可以使用 XMLHttpRequest2

5.拖拉操作 (drag-and-drop) 可以使用 Drag and Drop API

6.资料库可以使用 IndexedDB

...

想要了解 IE10 究竟支持多少 HTML5 相关技术，请参考 IE10 开发者指南 - HTML5 章节。

运用 CSS3 作样式设计

IE10 也大量支持 CSS3 许多规格，像是：

1.使用 CSS3 Animation 制作网页动画

2.使用 CSS3 Transition 设定网页元素过场特效

3.使用 CSS3 Transformation 来改变网页元素的缩放、位移或旋转

4.使用 CSS Grid Layout、CSS Multi-column layout 或 CSS Flexible Box 等来作排版

5.使用 CSS3 Gradients 制作渐层色彩效果

...

想要了解 IE10 究竟支持多少 CSS3 规格，请参考 IE10 开发者指南 - CSS 章节。

关于 Flash 支持

在大部份的情况下，Modern IE 不支持任何 plugins/ActiveX ，如果你的网页非得用 plugins/ActiveX，那可以使用一些方法要求使用者切换到桌面版的 IE 来开启网页，只要在网页中加入:

或是由服务器送出的回应标头加入这一项：

X-UA-Compatible: requiresActiveX=true

Modern IE 就会出现一个提示讯息，告诉使用者可以切换至桌面版 IE 来开启该网页。

提示使用者使用桌面版的 IE 来开启页面

然而，微软维护了一份 Flash 支持清单，若是 Modern IE 浏览在支持清单中的网站，就会开启 Flash 的支持功能，若您要申请加入支持清单，可参考更详细的说明： IE 开发指南 - Windows 8 中内容需使用 Adobe Flash Player 之网站的开发人员指导方针 一文。

适应浏览模式

Modern IE 使用的情境有下列几种：

1.Landscape 或是 Portrait 浏览

不论是 Windows 8 (Pro) 或 Windows RT，当使用者在平板上使用 Modern IE10 的时候，可能会以 Landscape 或是 Portrait 模式来浏览网页：

Landscape 模式浏览网页

Portrait 模式浏览网页

因应这两种浏览模式的改变，可以使用CSS3 Media Query语法来让浏览器套用对应的样式：

@media screen and (orientation: landscape) {

/* 这裡填入在 landscape 模式浏览时使用的样式 */

@media screen and (orientation: portrait) {

/* 这裡填入在 portrait 模式浏览时使用的样式 */

view raw gistfile1.css This Gist brought to you by GitHub.

如果要限定可视区域的大小，可以使用 CSS Device Adaption 语法: @-ms-viewport 语法 (规格中是 @viewport) 来指定，像是这样：

@media screen and (orientation: landscape) {

  @-ms-viewport {

    width: 1024px;

    height: 768px;

  }

  /* 在 landscape 模式下，并且把可视区域的大小设为 1024px * 768px */

}

@media screen and (orientation: portrait) {

  @-ms-viewport {

    width: 768px;

    height: 1024px;

  }

  /* 在 portrait 模式下，并且把可视区域的大小设为 768px * 1024px */

}

@-ms-viewport {

  width: device-width; /* 根据目前装置的画面宽度来设定可视区域的宽 */

}

view raw gistfile1.css This Gist brought to you by GitHub.

如果要了解更详细的设定语法，可以参考IE10 开发人员指南 - 装置适应一文。

snapped 模式或 fill 模式显示

在 Windows 8 中，(当屏幕解析度高于 1366x768, 且为 landscape 模式) 使用者可以将 Windows 应用市场应用程序 snapped 在画面的左右两侧，而其餘的显示区域则称为 fill。Modern IE 当然也可以支持snapped 及 fill 显示，此时网页也可以像前一个例子一样，使用 CSS3 Media Query 语法来套用不同的样式。

将 Modern IE10 贴齐在画面左侧

Modern IE10 以填满模式显示

像是这样：

@media screen and (max-width: 400px) {

@-ms-viewport { width: 320px; }

/* 当 Modern IE10 在贴齐模式时的样式设定，并且将可视区域设为 320px */

}

view raw gistfile1.css This Gist brought to you by GitHub.

为触控操作优化

在平板上使用 Modern IE，主要的输入方式都是触控操作，传统的网页多是以键盘鼠标的操作来设计，在加入触控操作的思维下，网页设计人员开始注意链接、按钮可能要更大一点适合手指点击 (若是预设的元件，像 Modern IE本来就会以适合手指操作的大小来呈现)。然而还有一些细节也值得注意：

适应表单输入

在 HTML5 的规格中定义了一些新的表单输入元件的类别，像是 email 或网址的输入，除了可以搭配 JavaScript API 来做资料格式验证之外，在 Modern IE 中还可以根据这样的类别来改变虚拟键盘的布局。像是使用 <input type="email" > 时，当使用者要输入资料时，虚拟键盘就会加入 @ 字元还有 .com 方便输入：

适合 Email 输入的键盘布局

以下分别是使用 <input type="tel" > 及 <input type="url" > 的虚拟键盘布局:

适合电话号码输入的键盘布局

适合网址输入的键盘布局

触控及手势操作

要撰写触控操作的相关代码，第一步就是要先侦测使用者的装置是否支持触控、以及支持到几点触控，这部份只要通过检查 navigator.msMaxTouchPoints > 1 就可以了 (而这个属性的值便是支持几点触控)

而另一个要注意的细节是，Windows 8 本身就有许多触控手势的操作，如果你的某些操作需要手势或触控，而又不希望它触发系统的触控操作 (比方说，你想要支持向下滑动的手势，但又不希望触发 Windows 应用市场应用程序关闭的动作)，可以在需要侦测手势的元件上使用 CSS 语法 -ms-touch-action 来设定是否要支持系统的触控手势，或是完全自订。举例来说，如果：

#myarea { -ms-touch-action: double-tap-zoom; }

则表示在 #myarea 的元素中，不使用其它预设的手势操作，只接受点击两下放大的操作，若是要完全自订所有的触控操作，则可以使用：

#myarea { -ms-touch-action: none; }

剩下就可以纯粹使用 mousedown 或是 MSPointerDown (统整 mouse/pen/touch) 等相关事件来设计。这部份可以参考 IE 官方部落格中的 Touch Input for IE10 一文。

而若要支持 drag-and-drop 或是其它的手势，也可以参考 IE 官方部落格中的 Go Beyond Pan, Zoom, and Gesture 一文来了解如何运用手势操作的事件。

关于更多在 Modern IE 上触控优化的介绍，可参考IE 开发者指南 - 使你的网站支持触控操作 一文。

融合于 Windows 8

如果你希望你的网站在 Modern IE 上能与 Windows 8 有更多的整合，其实只要注意几个 Windows 8 的细节以及 IE 所提供的功能就可以了。

分享网页内容

在 Windows 8 之中，使用者随时可以使用从屏幕右侧滑出的 Charms 上的分享功能，将他正在使用的 Windows 应用市场应用程序，通过某个支持分享功能的 Windows 应用市场应用程序将某个资讯分享出去 (若该应用程序有实作这部份的功能)。而在 Modern IE 也可以结合这个功能，像是这样：

在浏览网页中，叫出右侧的 Charms 然后选择分享

选择使用邮件程序作分享，邮件程序会抓取网页概要内容及 URL 分享

而你若希望分享资讯的程序 (如: 邮件) 在抓取网页内容时抓取合适的资料，那可以在网页中遵照Open Graph 的格式 (Facebook, Google+ 也是使用这个资讯) 加入适当的 meta 标签，如此一来，像是标题、摘要或是缩图就可以按照你设定的 open graph 资料来显示。以「VS2012女孩」这个网页为例，它的 Open Graph 资料为：

<meta property="og:title" content="Visual Studio 2012 选你心中的女孩">

<meta property="og:description" content="现在将由 Visual Studio 2012 女孩为你介绍这三大优势，并由你决定谁是最终的 Visual Studio 2012 女孩！">

<meta property="og:image" content="http://vs2012girls.blob.core.windows.net/assets/fbog.png">

view rawgistfile1.html This Gist brought to you by GitHub.

关于更详细的说明，可以参考 IE官方部落格中的 Sharing Links from IE10 on Windows 8 一文。

固定网站到开始画面

自从 IE9 开始加入了固定网站 (pinned sites) 的功能，使用者可以将网页钉在桌面下方的工作列上，搭配对应的 meta 标签，就可以自订跳跃清单 (在固定的 icon 上按右键的菜单) 以及通知的功能，关于固定网站的介绍，可以参考这一页的说明。

当然在桌面版的 IE10 仍旧支持了固定网站的功能，而 Modern IE 也可以固定到开始画面，除了延用 IE9 的跳跃清单设定方式之外，还能够自订动态磁贴上的图案及顏色、产生通知讯息。

要设定动态磁贴上的图示以及动态磁贴顏色，只要使用下面这样的 meta 标签便可以设定：

<meta name="msapplication-TileImage" content="图标路径"/>

<meta name="msapplication-TileColor" content="顏色代码"/>

view raw gistfile1.html This Gist brought to you by GitHub.

而若要产生通知的讯息及数量，也可以设定一个 XML 文件如：

<?xml version="1.0" encoding="utf-8" ?>

<badge value="5" />

view raw gistfile1.xml This Gist brought to you by GitHub.

然后再到网页中加入下列的 meta 标签设定：

<meta name="msapplication-badge" content="重读间隔时间 (ms); polling-uri=XML文件网址">

关于更详细的 Modern IE 固定网站的介绍，可以参考IE官方部落格中的 High Quality Visuals for Pinned Sites in Windows 8。

与 Windows 应用市场结合

Windows 8 / Windows RT 开始有了 Windows 应用市场，使用者可以从应用市场中搜寻、下载安装 apps，如果你的网页本身有 apps 在应用市场中，或是互相关连，则可以在网页中加入下列的 meta 标签，让 Modern IE 的菜单增加了直接前往应用市场下载的选项：

<meta name="msApplication-ID" content="App">

<meta name="msApplication-PackageFamilyName" content="应用程序套件名称">

以一款知名的游戏 Cut The Rope 为例，它在网站上做了一个 HTML5-based 的版本，使用者除了可以直接用 Modern IE 连到 http://cuttherope.ie/ 来玩游戏，也可以从菜单中找到 Windows 应用市场 Cut The Rope 的 app 选项，查看网站上的代码，就可以发现它设定为：

view raw gistfile1.html This Gist brought to you by GitHub.

这样便会在菜单中出现到 Windows 应用市场下载的选项或是直接开启已安装的应用程序。

菜单中加入了移至 Cut the Rope 应用程序的选项

结论

Windows 8 上的 IE10 (或 Modern IE) 随著 Windows 8 的 reimagine 后也加入了很多新的特色，如果在网页设计上多将这些因素考虑进去，想必您的网页会在 Windows 8 的使用者中更受欢迎！