专栏首页ionic3+Ionic4兼容IE浏览器处理

Ionic4兼容IE浏览器处理

在一般场合,Ionic4运行在手机端,没必要去兼容IE,但还是可以了解一下,以免有这样的需求。 Ionic4,它更趋向于一个UI框架,然后可配套Angular、React、Vue等框架使用。以Angular版本为例,兼容IE浏览器,主要是JS+CSS的语法和用法的调整处理。

1. JS,可以使用内置的Polyfill方案。

Angular项目默认提供了Polyfill支持,打开Ionic4项目中的src目录,里面有自动生成的polyfill.ts文件,打开可以看到这样的内容:

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

为了减轻打包的大小,默认上面的import都是注释掉的,这里要兼容IE,自然把它们打开,我觉得注释说明得很清楚,跟着做就好了。

重新编译运行,可以看到原来在IE浏览器提示脚本错误的都消失了,页面能正常运行,只是样式可能会有点变形。

2. CSS自定义样式调整

Ionic4大量使用了shawdow-dom,IE浏览器不解析#shadow-root,但会解析其下内容,所以Dom都会存在,只是样式可能会不同。系统内置样式基本是做了兼容处理的,而自定义样式放在全局和局部都会存在不一样的兼容效果,可以做下兼容性调整,如:

    --background: transparent;
    background-color: transparent;  // 兼容性后备处理

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SecurityUtils.getSubject().getPrincipal()为null的一种情况处理

    使用Shiro,原来写了一个基类,通过SecurityUtils.getSubject().getPrincipal()获取授权用户信息,一直用得好好的,突然有...

    IT晴天
  • ng-zorro-mobile,踩坑记

    ionic3和ionic4差别是比较大的,所以ionic3二次封装的组件基本是不能直接用在ionic4上。ng-zorro-mobile并不是依赖ionic的组...

    IT晴天
  • svg平移缩放

    svg平移缩放,我刚开始尝试的是自己处理外层容器的控制,结果发现能用,但是效果不太好,有拖尾现象,后来用个js库svg-pan-zoom即可。如果想支持手机端手...

    IT晴天
  • 一:打包JS

    创建vendor文件夹,其中minus.js、multi.js和sum.js分别用 CommonJS、AMD 和 ES6 规范编写。

    心谭博客
  • 学前端这个事儿,你是怎么个打算呢?

    这是我和一个同学的聊天截图,聊天内容很有代表性,就是知道要学习,知道要努力,但是,然后会怎么样?并不是很清楚。图中的这个哥们已经毕业有一些年头了,但他在面对跨行...

    web前端教室
  • 八:JS Tree Shaking

    是的,在webpack v4中,不再需要配置UglifyjsWebpackPlugin。(详情请见:文档) 取而代之的是,更加方便的配置方法。

    心谭博客
  • 小白要学好Web前端,要从哪里入手?

    要说目前IT行业需求量最大的岗位是什么,Web前端工程师一定有姓名。Web前端工程师绝对是近几年火爆而且高薪的职业之一,当然,不同的公司也有不同的叫法,比如:网...

    用户5827212
  • 【STM32F429的DSP教程】第1章 初学数字信号处理准备工作

    完整版教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=94547

    armfly
  • 【STM32H7的DSP教程】第1章 初学数字信号处理准备工作

    完整版教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=94547

    armfly
  • 【STM32F407的DSP教程】第1章 初学数字信号处理准备工作

    完整版教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=94547

    armfly

扫码关注云+社区

领取腾讯云代金券