当前位置: IEfans/IE专区/IE相关/打造Windows 8的Modern IE10完美网页

打造Windows 8的Modern IE10完美网页

IE相关互联网 2012-11-17 阅读(1444)

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

使用 HTML5 相关技术

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

影音文件可以使用及标签来播放
若要 2D/3D 绘图，可以使用标签以及 SVG 来搭配使用
文件操作可以使用 File API
进阶的 AJAX 操作 (如:文件上传) 可以使用 XMLHttpRequest2
拖拉操作 (drag-and-drop) 可以使用 Drag and Drop API
资料库可以使用 IndexedDB
...

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

运用 CSS3 作样式设计

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

使用 CSS3 Animation 制作网页动画
使用 CSS3 Transition 设定网页元素过场特效
使用 CSS3 Transformation 来改变网页元素的缩放、位移或旋转
使用 CSS Grid Layout、CSS Multi-column layout 或 CSS Flexible Box 等来作排版
使用 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 使用的情境有下列几种：

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.