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

3顶
1踩

移动开发

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

2012-11-16 12:25 by 副主编 wangguo 评论(1) 有9250人浏览
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为核心的浏览器。

发表评论

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

相关推荐

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

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

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

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

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

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

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

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

  • freetextbox 只能显示两张图片 user defined custom images (here, we're just allowing the first two)

    // modify the images allowed if (currentFolder == "~/images") { System.IO.DirectoryInfo directoryInfo = new System.IO.DirectoryInfo(Server.MapPath(currentFolder)); // these are the default

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

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

  • 简单插入图片在线编辑器代码

        简单的实现插入图片的在线编辑器，如果要测试，需要更改函数insImg()中的变量imgPath的值，上传文件的控件只起到获取文件名的作用，具体路径由自己来设置。    当然，在插入图片之前需要上传本地文件到服务器～             editer                     body {                font-size: 12px;     

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

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

  • FreeTextBox的问题终于解决了

    FreeTextBox的问题终于解决了 　这两天,FreeTextBox的问题一直困扰着我。这个问题在以前的文章中我已简单描述过。也就是在回复页面, 如果我用FreeTextBox代替TextBox，提交时却不能得到FreeTextBox中的内容。今天我终于找到了问题的真正原因，原来是.Text将ViewState关闭了。害得我走了很多弯路，我一直以为是MasterPages引起的，这两天一直在研

  • FreeTextBox 上传到虚拟主机上提示错误，且无法显示图片的解决办法。

    FreeTextBox上传到虚拟主机后，FreeTextBox出现以下错误，且图片无法显示 。FreeTextBox has not been correctly installed. To install FreeTextBox either:(1) add a reference to FtbWebResource.axd in web.config:path="FtbWebResourc

  • 烂泥：HTML编辑器中使用img插入图片

    本文首发于: 烂泥行天下  www.lanni654321.com 首先，要说明一点，我现在使用的这个系统的网络编辑器，不支持图片的插入功能。但是，我现在要实现这个功能，因为在我的文章中要出现大量的图片。 如果不能插入图片的话，那是一件很纠结的事情，而且也会影响到整篇文章的效果。 其次，对于HTML语言我是不懂的，也没有时间去学习它了。 而我现在的目的就是要把服务器上已经上传的图片，插入到...

  • 七款HTML在线编辑器[下载]

    Html在线编辑器--即所见即所得的可视化编辑器，现列出如下几款： =================================================== ①Text Editor  -- 用flash作的,比較特別 ②TinyMCE    -- 免費的編輯器,支援多種瀏覽器 ③FCKeditor   -- 免費的編輯器,支援多種瀏覽器    URL:[http://www.cnb

  • 杂谈之HTML中插入图片有几种方法？

    在HTML中插入图片有几种方法？或许这种类型的知识太过久远，应该每个人的都回答的不一样，我现在只针对我自己现在掌握的，可回忆的知识，扬帆去寻找快要消失在记忆海洋中的知识贝壳。 第一类，静态添加。也是最简单的一类，可以说是简单粗暴。在html里面直接使用标签去添加，插入图片。 第二类，动态添加。有静态添加就有动态添加，跟静态添加差不多一样，不过不一样的是在html的里面使用标签去添加，插入图片。...

  • cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像。)

    我的需求功能：在手机端实现上传头像，带裁剪框。 cropper.js 通过canvas实现图片裁剪，最后在通过canvas获取裁剪区域的图片base64串。 cropper 文档：官方文档是全英文的，好吧我看不懂。只能一个个试试效果，就有了下面的总结。官方文档&amp;lt;-点这 1.container 容器 2.canvas 图片 3.crop 裁剪框 option相...

  • HTML编辑器 实现CTRL+V粘贴图片并上传、WORD粘贴带图片

    用户发布新闻的时候是从word里面复制图片和文字，然后将word图文内容粘贴到web富文本编辑器中，希望能够将word的图片自动上传到服务器中，服务器地址能够自定义，后端的话需要支持任意开发语言，比如ASP,ASP.NET,JSP,PHP,PYTHON等。HTML编辑器粘贴word图片，web编辑器粘贴word图片，web富文本编辑器粘贴word，前端编辑器粘贴word内容，前端web编辑器粘贴word，支持快捷键操作（Ctrl+V），3.如果接口返回的图片地址没有域名，请配置ImageUrl。

  • HTML5 实现本地图片裁剪

    HTML5 实现本地图片裁剪 文章目录HTML5 实现本地图片裁剪1.知识点1.HTML 结构与 CSS 样式2.初始化3 实现 handleFiles，获取文件，读取文件并生成 url4.实现 paintImage 方法5 实现 cutImage 方法6 编写 drag 方法7 保存截图8 完整 js 代码 这次小的案例是利用 HTML5 的 canvas 技术，结合 HTML5 的 File API 来实现图片的本地裁剪，从一个大图片中选取裁剪区域， 1.知识点 canvas JavaScript

Global site tag (gtag.js) - Google Analytics