目录
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) 来指定，像是这样：
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 以填满模式显示
像是这样：
@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 也可以结合这个功能，像是这样：
选择使用邮件程序作分享，邮件程序会抓取网页概要内容及 URL 分享
而你若希望分享资讯的程序 (如: 邮件) 在抓取网页内容时抓取合适的资料，那可以在网页中遵照 Open Graph 的格式 (Facebook, Google+ 也是使用这个资讯) 加入适当的 meta 标签，如此一来，像是标题、摘要或是缩图就可以按照你设定的 open graph 资料来显示。以「VS2012女孩」这个网页为例，它的 Open Graph 资料为：
view raw gistfile1.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 的使用者中更受欢迎！
