目录html
1.使用 HTML5 相关技术css3
2.运用 CSS3 做样式设计git
3.关于 Flash 支持github
4.适应浏览模式Landscape 或 Portrait 模式canvas
snapped 模式或 fill 模式显示windows
为触控操做优化友善表单输入浏览器
5.触控及手势操做服务器
6.融合于 Windows 8app
分享网页内容
固定网站及跳跃清单
与 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 的使用者中更受欢迎！