您的位置:网站首页 > 电器维修资料网 > 正文 >
如何完美打造Win8 Metro版IE10浏览器页面
来源: 日期:2013-11-24 19:10:48 人气:标签:
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 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 的使用者中更受欢迎!
【看看这篇文章在百度的收录情况】