2

我在桌面浏览器上查看此网站时遇到问题。它们具有响应式/流畅的设计，当浏览器宽度小于 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>
4

2 回答 2

4

一种方法是：

  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突变观察者来解决。
于 2013-09-21T01:40:36.630 回答
0

如果您将 Stylish 添加到 Firefox，您可以为特定域添加样式。我通常发现我需要包含!important许多样式才能使它们得到认可。

Firefox 的另一个选择是直接编辑 userContent.css 文件。你可以很容易地谷歌“userContent.css firefox windows7”来找到它的位置。（我用的是 Mac。）

于 2013-09-20T23:23:36.473 回答