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

3顶
1踩

移动开发

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

2012-11-16 12:25 by 副主编 wangguo 评论(1) 有9289人浏览
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 类

    FreeTextBox 研究 -- FreeTextBox 类 FreeTextBox 派生自 System.Web.UI.Control 类，而不象普通Web控件那样派生自： System.Web.UI.WebControls.WebControl 类。System.Web.UI.Control 类是 System.Web.UI.WebControls.WebControl 类的基类。

  • 前端必知必会-html图片设置

    本文介绍了的使用，如有问题欢迎私信和评论。

  • FreeTextBox使用指导

    <br />FreeTextBox使用指导<br /> <br />1.       下载免费的FreeTextBox第三方插件<br />下载地址：<br /> <br />http://dl5.csdn.net/fd.php?i=947824925517358&s=1ef5431b527317bd9300e14e407dce0e<br /> <br />2.       下载压缩文件后解压，打开bin文件夹将FreeTextBox.dll复制到你自己网站的bin文件夹下（没有的话，自己先创建bin文件夹

  • 给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的探索了！今天上午到现在，解决了该控件的上传图片一直是绝对路径的问题，并修改成了相对路径。   研究成果 自定义上传的图片保存文件夹位置 ~的作用 将传入数据库中的图片链接信息，修改为相对路径形式   自定义上传的图片保存文件夹位置 没想到出奇的简单

  • 可以插入本地图片的在线编辑器（xheditor）

    至少尝试了10个在线编辑器才选出了的这个，支持本地图片插入，里面自己写了个java版本的ajax处理。

  • 最简单的网页编辑器

    最简单。最实用，最快捷bbyjywyzz.rar

  • FreeTextBox的使用（C#）

    FreeTextBox的使用（C#） FreeTextBox的使用（C#） FreeTextBox的使用（C#）

  • freetextbox java_FreeTextBox使用详解 (版本3.1.1)

    FreeTextBox使用详解Author: Annerose Date:12/16/2005版本: FreeTextBox 3.1.1 ASP.NET1.11.下载 FreeTextBox 3.1.1 (released 2005/11/08)http://www.freetextbox.com/downloads.aspx2. 安装FreeTextBox 3.0以上版本均支持内部模式...

  • 怎么在html中复制粘贴图片,如何复制其他网页上的文章和图片

    首先，我们并不建议直接复制别人的内容，以免侵权。但是不排除在某些情况下，需要将其他网页上的内容完整的复制到你的网站中。比如，将自己的微博文章复制到自己的网站。大部分人都知道这个简单的方法，先选中目标文字按CTRL+C快捷键，然后再网站后台文本编辑器中安CTRL+V粘贴即可。但是如果文章中有插图呢？图片文件会不会自动上传到网站中来？下面就来详细介绍一下这个过程。复制了网页内容后，粘贴到文本编辑器中往...

  • MyCnCart - 如何编辑html内容中的文字和更换图片

    比如我们想修改某模板前台的下图所示的html内容块，它由mycncart系统【后台】->【扩充功能】->筛选出【模组】->【HTML】->【HomePage Subbanner2 CMS】,该部分包含文字和图片。 编辑该HTML模组【HomePage Subbanner2 CMS】，打开界面后，我们先点击界面中的图标按钮，如下图所示，然后上传相关图片到服务器，记住该图片的目录路径和文件名

  • 几款常见的可视化HTML编辑器(WYSIWYG).

    目前HTML编辑器可以说是种类繁多, 特别是国外, 开源的商业的, 各种版本, 不一而足. 我只是简单介绍几个常见的免费/开源 的可视化HTML编辑器 (WYSIWYG).HTMLArea功能一般, 文件不大, 支持是几种语言, 比较容易定制, 使用广泛,支持IE/Firefox/Mozilla等多种浏览器. 遵循BSD版权, 目前最新版是3.0.官方网站: http://www.htmlarea

  • 可插入图片的FreeTextBox(源码)

    本控件是在FreeTextBox 1.6.3 中文版基础上增加上传图片的功能，上传的图片保存在upimage文件夹下. 演示地址: http://www.gdqd.com/test.aspx源代码下载 转载于:https://www.cnblogs.com/k98188/archive/2006/10/08/523837.html...

  • vue 添加可以粘贴图片的富文本编辑器

    第一步 npm 下载包 npm install vue-froala-wysiwyg --save 第二步 miain.js引入 如何： //除了引入这些需要的js外 你还可以 //全屏js require('froala-editor/js/plugins/fullscreen.min.js') //打印 js require('froala-editor/js/plugins/print.min.js') //语言 require('froala-editor/js/languages/zh_.

Global site tag (gtag.js) - Google Analytics