javascript - 在桌面上我的网站上打开新链接时，它会在 Chrome 上加载移动 CSS

Question

当我在我的网站上并使用鼠标中键在新选项卡中加载页面时，它会将页面呈现为好像它在移动设备上，但它实际上是在桌面上。它最近才在更新后开始在 Chrome 上执行此操作。

由于该网站在我加入之前完成，他们并没有像他们应该使用的那样使用媒体查询，但实际上使用了移动 CSS 文件和桌面 CSS 文件。根据屏幕的大小，它会加载所需的屏幕。

我认为正在发生的是，当页面在新选项卡中加载时，它会将其加载到较小的屏幕中，使我的脚本相信它在移动设备上，但实际上它在桌面上。

jQuery：

function ResolutionSwitcher(config) {
        this.cutoff = document.cutoff || 980;
        this.$head = $(document.querySelector("head"));
        $.extend(this, config);
    }

    ResolutionSwitcher.prototype.appendStyle = function(url) {
        this.$head.append($("<link/>", {
            type: "text/css",
            rel: "stylesheet",
            href: url
        }));
    };

    ResolutionSwitcher.prototype.removeStyle = function(url) {
        this.$head.find("link[href$='" + url + "']").remove();
    };

    ResolutionSwitcher.prototype.onDesktop = function() {
        this.appendStyle("/static/public/css/desktop.v2.css");
        this.removeStyle("mobile.css");
        DesktopLayout.init();
    };

    ResolutionSwitcher.prototype.onMobile = function() {
        this.appendStyle("/static/public/css/mobile.v2.css");
        this.removeStyle("desktop.v2.css");
        MobileLayout.init();
    };

    ResolutionSwitcher.prototype.checkResolution = function() {
        var desktop_cutoff = 460;

        // if screen is smaller than cutoff (mobile)
        if(this.cutoff >= screen.width) {
                this.onMobile();
                window.site_version = 'strict_mobile';
            }

        // if screen is bigger than cutoff but window is smaller than cutoff and version is not already mobile
        else if(desktop_cutoff >= window.outerWidth && window.site_version != 'mobile') {
                this.onMobile();
                window.site_version = 'mobile';
                // navScrolling('#secondList');
                // navScrolling('#thirdList');
                navScrolling();
            }

        // if screen and window are both wider than cutoff and version is not already desktop
        else if(desktop_cutoff < window.outerWidth && window.site_version != 'desktop') {
                this.onDesktop();
                window.site_version = 'desktop';
                // navScrolling('#secondList');
                // navScrolling('#thirdList');
                navScrolling();
            }
    };
return ResolutionSwitcher;

标签： javascriptjqueryhtmlcssgoogle-chrome