资讯频道 → 移动开发
阅读更多

3顶
1踩

移动开发

原创新闻 让针对 Webkit 优化的网站兼容 WP8 IE10

2012-11-16 12:25 by 副主编 wangguo 评论(1) 有9259人浏览
webkit ie windows phone html5

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

微软Windows Phone开发者博客今日发表了一篇博文，阐述了如何让针对Webkit浏览器（iOS或Android）优化的网站完美运行于Windows Phone 8的IE10浏览器上。

微软表示，由于IE10大大改善了对于HTML5的支持，因此，开发者可以轻松使针对WebKit浏览器优化的网站也支持IE10，这意味着开发者只需更改少量的代码，即可为用户提供统一的浏览体验。

第1步：检测Windows Phone 8版IE10浏览器

微软之前公布了IE10的user-agent字符串： 

Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; ARM; Touch; IEMobile/10.0; <Manufacturer>; <Device> [;<Operator>])

这个过程完成后，如果还存在差异，最好采用特征检测，或者参照其他编写跨浏览器代码的最佳实践。需要注意的是，WP8中的IE10不支持Flash视频，因此，请确保网站中使用的是HTML5视频。

此外，还需要更新网站依赖的第三方库，如jQuery Mobile，确保支持最新的浏览器。

第2步：确保使用标准模式

确保IE10以最符合标准的模式来渲染你的网站。可以采用以下方式：

  • 使用HTML5 doctype：<!DOCTYPE html>
  • 可以在HTTP头中添加<meta http-equiv="x-ua-compatible" content="IE=edge" />指定使用最新的IE版本来渲染
第3步：更新CSS和DOM API

你还需要对网站的一些代码进行更改，最简单的方式是，将一些针对WebKit的特定CSS属性或JavaScript方法，更改为不带前缀的标准形式或带MS前缀的形式。

详见：CSS and DOM API updates

第4步：更新触摸和鼠标事件

WebKit和IE10对于触摸和鼠标事件的处理是不同的。WebKit的触摸事件接口与鼠标处理事件是分开的，而IE10将触摸、鼠标和手写笔事件整合到了一个接口中。因此，需要对代码进行调整。

详见：Updating touch and pointer events

第5步：处理不标准的行为

最后需要处理其他未形成W3C标准的方法。在这些情况下，WebKit和IE10解决方案可以共存于一个网站中。

Via Windows Phone开发者博客
  • 大小: 45.7 KB
  • 大小: 23.4 KB
  • 大小: 34 KB
  • 大小: 26.9 KB
  • 大小: 42.5 KB
3
顶
1
踩
评论 共 1 条 请登录后发表评论
1 楼 lonelybug 2012-11-18 23:19
我觉得微软现在还生活在错觉中，他应该修改自己的IE10来更贴近HTML5相关标准，因为现在已经不是她一家独大的时代了。再加上浏览网页很多通过ipad等设备其基本运行已webkit为核心的浏览器。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 可以本地上传图片的FreeTextBox Demo

    可以本地上传图片的FreeTextBox.网络上的Freetextbox只可以插入网络地址。

  • FreeTextBox上传图片

    FreeTextBox基本用法和上传图片 eWebEditor、WebHtmlEidtor   等许多在线编辑器默认都有一个功能，可以实时把图片上传到服务器并插入到编辑器里面，而在 Freetextbox 默认的“插入图片”只能让你插入一个图片网址，如果你需要实时上传图片和对图片进行设置的话，就要打开强大的 InsertImageFromGallery 功能。虽然网上能搜到不少

  • FreeTextBox中手工上传和插入图片

    上传图片更简便和可增加简单上传视频功能。当使用File上传后，取得文件扩展名newext,在FreeTextBox内容的最后插入图片或RealPlayer视频。 newext=newext.ToLower();this.FreeTextBox1.StartMode=EditorMode.HtmlMode;if(newext==".png"||newext==".jpg...

  • FreeTextBox：.NET富文本编辑器的深入探索

    本文还有配套的精品资源，点击获取 简介：FreeTextBox是一个为.NET Framework设计的文本编辑器控件，提供了文本格式化、颜色选择和文件上传的集成功能。它简化了富文本内容的创建和编辑，并通过颜色选色器和上传组件提升了用户体验和内容创作效率。同时，针对FreeTextBox的第三方扩展工具如"poaporweather.rar"和"CheckColor.rar...

  • FreeTextBox使用详解(FTBv3-1-6)

    文本编辑框，类似于csdn使用的fckedit。具有广泛的用途。下面介绍其中之一FreeTextBox：下载FreeTextBox：http://freetextbox.com/files/6949/download.aspx下载完解压。我使用的是Framework-2.0中的FreeTextBox.dll。这个比1.0的要容易上手点，不需要配置太多。将这个文件夹复制到项目文件

  • 给FreeTextBox添加上传图片功能

    在项目中用了FreeTextBox作为编辑器，非常方便，但美中不足的是需要通过相册来插入上传的图片，虽然功能比较强大，但用户还是觉得比较麻烦，所以就在网上搜索了一番，还真找到了宝玉大大发的一篇。按照宝玉的文章，我做了一个demo，但发现有错误，原来宝玉是在04年发表的文章，是针对那时候的FreeTextBox的，而我现在用的是3.1.6。于是就仔细得看了看代码，找到了解决方法，贴出来与大家分享。 ...

  • 关于FreeTextBox中的图片上传小结

    弄了一个FreeTextBox来玩.好象目前最高版本3-1-3.下载下来发现default的设置没有上传文件的功能.看了一下,也不难.以下作为小结,可能以后用的到. 如何设置FTB的example?在此文件夹内新建一个名为bin的文件夹,并把你想用的版本的FreeTextBox.dll 放进去.在此文件内新建一个名为web.config的文件,写入以下代码: Code hi

  • 让FreeTextBox控件上传相对路径图片-研究结果

    服务器上终于可以正常显示ASP.NET的FreeTextBox控件所展现出来的新闻编辑器了，这下又可以继续对于FreeTextBox的探索了！今天上午到现在，解决了该控件的上传图片一直是绝对路径的问题，并修改成了相对路径。   研究成果 自定义上传的图片保存文件夹位置 ~的作用 将传入数据库中的图片链接信息，修改为相对路径形式   自定义上传的图片保存文件夹位置 没想到出奇的简单

  • HTMLWeb编码器FreetextBox(里面说明书)

    ASP.NET HTMLWeb编码器FreetextBox(里面说明书) 很方便的webhtml编码器

  • 在IFRAME中编辑（HTML文本在线编辑器原理之一）

    editarea.document.designMode="on";function a(){ alert(editarea.document.body.innerHTML);} 

  • js给FreeTextBox赋值+EXT后台调用赋值方法

    前台FreeTextBox赋值：function SetEditorContent(content)   {        txt_content_editor.document.body.innerText=content//外显值      // alert(document.getElementById("txt_content").value);       } 后台EXT

Global site tag (gtag.js) - Google Analytics