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

Question

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

由于我使用的是缩放比例为 125% 的 Firefox，因此我的桌面浏览器的有效宽度小于 990 像素。

我查看了 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 和变异观察器来解决。