如何使用 Stylish 或 Greasemonkey 替换 @media (max-width)？

Question

我在桌面浏览器上查看此网站时遇到问题。它们采用响应式/流畅设计，当浏览器宽度小于 990 像素时，会显示移动菜单按钮而不是水平导航栏。

由于我使用的是 125% 缩放的 Firefox，因此我的桌面浏览器的有效宽度小于 990px​​。

我查看了 CSS 代码并找到了这一行。如何使用 Stylish、Greasemonkey 或其他方式自动将“990px​​”的最大宽度值替换为“800px”？

@media (max-width:990px) { ... }

我在 Windows 7 上使用 Firefox 23。

编辑：根据到目前为止的评论，我需要用我自己的自定义 CSS 文件替换他们的 CSS 文件。那么如何使用 Greasemonkey 来替换href（这似乎是一个非静态文件名）？

<link rel="stylesheet" type="text/css" href="http://d1h60c43tcq0zx.cloudfront.net/static/css/versioned/global-cdn-ac243f54ab6bb9637fcc5fa32f8b514d.css"></link>

Answer 1

一种方法是：

1. <link>使用 中文本的常量部分查找有问题的部分href。
2. 记录该链接的href.
3. 删除该链接。
4. 用于GM_xmlhttpRequest()再次获取文件（希望它已被缓存）。
5. 使用正则表达式修复获取的 CSS。
6. 用于GM_addStyle()添加固定CSS。

这是一个完整的 Greasemonkey 脚本，说明了该过程：

// ==UserScript==
// @name     _Replace bad CSS link
// @include  http://www.fleaflicker.com/nfl/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// @grant    GM_xmlhttpRequest
// ==/UserScript==

var badCSS  = $("link[href*='global-cdn-']");
var badURL  = badCSS.attr ("href");

badCSS.remove ();

GM_xmlhttpRequest ( {
    method:     "GET",
    url:        badURL,
    onload:     function (rsp){
        var betterCSS   = rsp.responseText.replace (
            /max-width:990px/g, "max-width:500px"
        );

        GM_addStyle (betterCSS);
    }
} );

笔记：

1. 为了更快/更好的性能，如果 CSS 不经常更改，请手动编辑它并将其保存在安装脚本的同一文件夹中。然后使用GM getResourceText()来获取 CSS，而不是GM_xmlhttpRequest().
2. 如果由于启动延迟而导致页面“闪烁”令人烦恼，那么这是一个完全不同的问题，这可能可以通过@run-at document-start突变观察者来解决。