在学校, 接触的前端范围略浅, 只是单纯地知道 PC 端和 Mobile 端, 但是经过实习的摸索, 发现其实 H5 页面有很多种不同的表现形式, 也就是载体.

更新

[2019-12-11]

  • Initial release

[2019-12-12]

Added

PC 载体

H5 页面在 PC 端的载体, 大概就是各种浏览器了, 其中五大主流的浏览器包括:

  • Firefox
  • Chrome
  • Safari
  • Opera
  • IE

页面的兼容性, 也主要围绕这几个浏览器来进行.

Mobile 载体

实习前, 我天真的以为移动端的页面只是单纯地在浏览器上运行, 这种想法是没错的, 但是实际上, 移动端的浏览器可以分为几种类型:

  • 纯厂商浏览器
  • Webview 套件

其中, 厂商浏览器 和 PC 端一样, 是不同的浏览器厂商研发的, 比如:

  • UC 浏览器
    • UC 引擎, 市场占有率最高
  • QQ 浏览器
    • Webkit 引擎
  • Safari 浏览器
  • …

而 Webview 套件, 则是不同的操作系统(Android 和 iOS)底层提供的 Web 组件, 供给 HydirdAPP, 比如微信内部的浏览器来使用, 由于源于不同的操作系统, 所以肯定存在兼容问题.

就像 Android 现在已经发展到了 Android10, 而 iOS 则进化到了 iOS13, 每个版本的更新迭代, 必定会产生兼容性的坑, 而这些坑, 需要开发者来填补.

iOS 禁止第三方浏览器内核, 而安卓则允许厂商自定义 Webview 使用的内核, 所以会产生较大的兼容性差异, 腾讯的 X5 就是在这样的大背景下产生的, 目的是为了抹平不同 Android 版本的 webview 差异.

参考:

总结

最后, 画一张脑图, 来简单梳理一下脉络, 方便记忆:

H5 页面的载体类型