家电维修班,手机维修班,电脑维修班,电工班,焊工班,液晶电视维修班,电动工具维修班、电动车摩托车维修班、网络营销培训、网站设计培训、淘宝培训---全国招生 家电维修班,手机维修班,电脑维修班,电工班,焊工班,液晶电视维修班,电动工具维修班、电动车摩托车维修班、网络营销培训、网站设计培训、淘宝培训---全国招生
您的位置:网站首页 > 电器维修资料网 > 正文 >

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

★★★★★【文章导读】:如何完美打造Win8 Metro版IE10浏览器页面具体内容是:internetexplorer技术展示网页目录1.使用html5相关技术2.运用css3作样式设计3.关于flash支持4.适应浏览模式landscape或portrait模式snapped模式或fill模式显示为触控操作优化友善表单输入5.触控及手势操作6.融合于wi…

来源: 日期:2013-11-24 19:10:48 人气:标签:

如何完美打造Win8 Metro版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 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 的使用者中更受欢迎!


【看看这篇文章在百度的收录情况】

联系方式

  • 0731-85579057 , 0731-85569651
  • 点击这里给我发消息点击这里给我发消息点击这里给我发消息
网站栏目导航: 培训课程 手机硬件 手机软件 综合维修 学校资讯 考证指南 就业导航 招生指南 教学管理 入学须知 学校图片 教学大纲 师资力量 学生感言 学校概况 教学实景 手机维修培训资讯 电脑维修培训 维修间故事 手机维修培训 液晶电视维修培训 家电维修资料网 电器维修资料网 招生地区 刷机教程 家电维修 手机技巧 老版网站 招生平台网络工程
友情链接: 监控安装培训 电动工具维修 家电维修学校 电工培训学校 液晶电视维修 焊工培训学校 电工焊工学校 电脑维修学校 家电维修培训 电脑维修培训 家装电工培训网络安装维护 主板维修 液晶显示器 笔记本电脑维修 电脑组装维护 电脑硬件维修 电脑维修 电工考证 电工证 装修电工 水电工 维修电工 电工 焊接技术 电焊工 焊工 电动设备维修 电动工具维修 制冷维修 空调维修 冰箱维修  更多>>
阳光-手机维修教育品牌学校
点击这里给我发消息 点击这里给我发消息 点击这里给我发消息
电工培训学校 电动车维修学校 摩托车维修学校 摩托车维修培训 手机维修培训 家电维修培训 电脑维修培训 电动工具维修培训 液晶电视维修培训 安防监控培训 空调维修培训 网络营销培训 网站设计培训 淘宝网店培训 电器维修培训 家电维修学校 电工培训 焊工培训 电工学校 电工培训学校 电动车维修学校 摩托车维修学校 摩托车维修培训 手机维修培训 家电维修培训 电脑维修培训 电动工具维修培训 液晶电视维修培训 安防监控培训 空调维修培训 网络营销培训 网站设计培训 淘宝网店培训 电器维修培训 家电维修学校 电工培训 焊工培训 电工学校 电工培训学校 电动车维修学校 摩托车维修学校 摩托车维修培训 手机维修培训 家电维修培训 电脑维修培训 电动工具维修培训 液晶电视维修培训 安防监控培训 空调维修培训 网络营销培训 网站设计培训 淘宝网店培训 电器维修培训 家电维修学校 电工培训 焊工培训 电工学校 电工培训学校 电动车维修学校 摩托车维修学校 摩托车维修培训 手机维修培训 家电维修培训 电脑维修培训 电动工具维修培训 液晶电视维修培训 安防监控培训 空调维修培训 网络营销培训 网站设计培训 淘宝网店培训 电器维修培训 家电维修学校 电工培训 焊工培训 电工学校
中山市,固原市,银川市,玉树,海东,陇南市,酒泉市,张掖市,天水市,金昌市,兰州市,榆林市,延安市,渭南市,铜川市,阿里,山南,拉萨市,怒江,文山州,楚雄州,普洱市,昭通市,玉溪市,昆明市,毕节,铜仁,遵义市,贵阳市,甘孜州,资阳市,达州市,宜宾市,南充市,遂宁市,绵阳市,泸州市,自贡市,三亚市,崇左市,河池市,玉林市,钦州市,梧州市,柳州市,梅州市,肇庆市,湛江市,佛山市,珠海市,韶关市,湘西州,怀化市,郴州市,张家界市,邵阳市,株洲市,仙桃市,随州市,荆州市,荆门市,襄樊市,黄石市,驻马店市,信阳市,南阳市,漯河市,中卫市,石嘴山市,海西,海南藏州,黄南州,海北,甘南,庆阳市,平凉市,武威市,白银市,嘉峪关市,安康市,汉中市,咸阳市,宝鸡市,林芝,日喀则,昌都,迪庆,德宏,大理,西双版纳,红河州,临沧市,丽江市,保山市,曲靖市,黔东州,黔西州,安顺市,六盘水市,凉山州,阿坝州,雅安市,广安市,眉山市,内江市,广元市,德阳市,攀枝花市,成都市,海口市,来宾市,百色市,贵港市,北海市,桂林市,南宁市,云浮市,揭阳市,潮州市,清远市,阳江市,汕尾市,惠州市,茂名市,江门市,汕头市,深圳市,广州市,娄底市,永州市,益阳市,岳阳市,湘潭市,长沙市,恩施州,黄冈市,孝感市,鄂州市,十堰市,武汉市,周口市,商丘市,三门峡市,许昌市,焦作市,安阳市,鹤壁市,平顶山市,开封市,郑州市,聊城市,滨州市,德州市,莱芜市,日照市,泰安市,烟台市,潍坊市,东营市,淄博市,上饶市,济南市,抚州市,宜春市,赣州市,新余市,九江市,景德镇市,宁德市,南平市,泉州市,莆田市,厦门市,宣城市,亳州市,六安市,宿州市,黄山市,滁州市,安庆市,淮北市,马鞍山市,蚌埠市,芜湖市,合肥市,丽水市,舟山市,衢州市,金华市,湖州市,嘉兴市,宁波市,宿迁市,镇江市,盐城市,连云港市,苏州市,徐州市,南京市,绥化市,牡丹江市,佳木斯市,大庆市,鹤岗市,哈尔滨市,白城市,白山市,辽源市,吉林市,葫芦岛市,铁岭市,盘锦市,阜新市,锦州市,本溪市,鞍山市,沈阳市,锡林郭勒盟,通辽市,乌海市,吕梁市,忻州市,晋中市,晋城市,阳泉市,太原市,廊坊市,承德市,保定市,邯郸市,唐山市,宁夏,甘肃省,西藏,贵州省,重庆市,广西,湖南省,河南省,江西省,安徽省,江苏省,黑龙江省,辽宁省,山西省,天津市,四平市,内蒙古,吴忠市,果洛,西宁市,定西市,商洛市,西安市,那曲,黔南州,巴中市,乐山市,贺州市,防城港市,东莞市,河源市,常德市,衡阳市,咸宁市,宜昌市,濮阳市,新乡市,洛阳市,菏泽市,临沂市,威海市,济宁市,枣庄市,青岛市,吉安市,鹰潭市,萍乡市,南昌市,龙岩市,漳州市,三明市,福州市,池州市,巢湖市,阜阳市,铜陵市,淮南市,台州市,绍兴市,温州市,杭州市,泰州市,扬州市,淮安市,南通市,常州市,无锡市,大兴安岭,黑河市,七台河市,伊春市,双鸭山市,鸡西市,齐齐哈尔市,延边,松原市,通化市,长春市,朝阳市,辽阳市,营口市,丹东市,抚顺市,大连市,阿拉善盟,兴安盟,乌兰察布市,巴彦淖尔市,呼伦贝尔市,鄂尔多斯市,赤峰市,包头市,呼和浩特市,临汾市,运城市,朔州市,长治市,大同市,衡水市,沧州市,张家口市,邢台市,秦皇岛市,石家庄市,青海省,陕西省,云南省,四川省,海南省,广东省,湖北省,山东省,福建省,浙江省,上海市,吉林省,河北省,北京市