美文网首页ionic4+
Ionic4兼容IE浏览器处理

Ionic4兼容IE浏览器处理

作者: IT晴天 | 来源:发表于2019-01-30 15:29 被阅读20次

    在一般场合,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;  // 兼容性后备处理
    

    相关文章

      网友评论

        本文标题:Ionic4兼容IE浏览器处理

        本文链接:https://www.haomeiwen.com/subject/lzcojqtx.html