cocos creator开发pc端的浏览器适配问题

因为pc浏览器端不比手机端，手机分辨率除了ipad等特别的，一般只需要把背景图拉宽或者拉高一些，就能保证不留黑边，pc端浏览器可以随便拉，但是一般为了效果，浏览器界面再拉也不允许留黑边的，可以试试其他网站拉伸（基本都是没黑边），只是窗口到一定程度后，界面保持原比例，不再缩放

主canvas的适配代码，监听浏览器窗口变化，设置canvas的适配 设计比例1920*1080

onLoad() {
        this.updateSizeFit();
        let _this = this;
        // 监听浏览器窗口大小变化
        cc.view.setResizeCallback(function () {
            _this.updateSizeFit();
            // rect.left, rect.top, rect.width, rect.height (像素值)
        });
    }   
    // 根据浏览器窗口变化适配
    updateSizeFit() {
        var rect = cc.game.canvas.getBoundingClientRect();
        let rateWidth = Math.round(rect.width / 1920 * 100) / 100;
        let rateHeight = Math.round(rect.height / 1080 * 100) / 100;
        console.log("屏幕发生变化", rateWidth, rateHeight)
         // 这里0.2是高度和1080，宽度和1920的比例 差距较大，就是和原始设计比例相比，太高或太宽了，就不做适配了，窗口变化，界面始终不缩放，维持锚点在窗口内，锚点外的就被窗口边缘覆盖了
        if (Math.abs(rateWidth - rateHeight) > 0.2 || rateWidth == rateHeight) {// 宽高差距太大或者宽高比=，不做适配
            cc.Canvas.instance.fitHeight = false;
            cc.Canvas.instance.fitWidth = false;
            UIModalMgr.inst.updateMaskView();// 更新popUI mask大小
            EventCenter.emit(EventCenterNameEnum.ScreenChange);
            return;
        }
        if (rateWidth < rateHeight) {
            cc.Canvas.instance.fitHeight = false;
            cc.Canvas.instance.fitWidth = true;// 以宽来适配
        }
        else if (rateHeight < rateWidth) {
            cc.Canvas.instance.fitHeight = true; // 以高来适配
            cc.Canvas.instance.fitWidth = false;
        }
    }

其他全屏页面的适配

1，全屏页面预制体中预制体根结点添加widget,代码中选中左右上下，目标设置为canvas,此代码在界面初始化调用一次就行了

     widget.right = 0;

                widget.left = 0;

                widget.top = 0;

                widget.bottom = 0;

                widget.isAlignLeft = true;

                widget.isAlignRight = true;

                widget.isAlignBottom = true;

                widget.isAlignTop = true;

widget.target = cc.find("Canvas");

        widget.updateAlignment();

2，预制体的背景图bg也同样添加widget,同1设置，target以预制体的根结点就可以，这样始终可以充满整个屏幕

 3，全屏预制体上其他的按钮之类的，只要不是居中显示，一般都需要加widget,做相对位置，在窗口变化的时候，来保持元素位置偏移不那么大，widget的target是预制体根结点，或者本元素的父节点

比如我全屏界面<关闭按钮>在左上脚，widget以预制体根结点，这样可以保持关闭按钮一直在左上角，适配窗口比较好