如何使用时尚或Greasemonkey替换@media(最大宽度)? [英] How to replace @media (max-width) using Stylish or Greasemonkey?

问题描述

在台式机浏览器上查看此网站时遇到问题.它们具有响应/流体设计，当浏览器宽度小于990px​​时，显示移动菜单按钮而不是水平导航栏.

I'm having a problem viewing this website on my desktop browser. They have a responsive/fluid design that shows a mobile menu button instead of a horizontal nav-bar when the browser width is less than 990px.

由于我使用的是Firefox，缩放比例为125％，因此我的桌面浏览器的有效宽度小于990px​​.

Since I'm using Firefox with 125% zoom, my desktop browser is less than 990px effective width.

我查看了CSS代码并找到了这一行.如何使用时尚，Greasemonkey或其他方式自动将"990px​​"的最大宽度值替换为"800px"?

I looked into the CSS code and found the line. How can I use Stylish, Greasemonkey, or some other way to automatically replace the max-width value of "990px" with "800px"?

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

我正在Windows 7上使用Firefox 23.

I'm using Firefox 23 on Windows 7.

根据到目前为止的评论，我需要用自己的自定义CSS文件替换其CSS文件.那么，如何使用Greasemonkey替换href(似乎是非静态文件名)?

Based on comments so far, I need to replace their CSS file with my own custom CSS file. So how do I use Greasemonkey to replace the href (which appears to be a non-static filename)?

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

推荐答案

一种方法是:

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

1. Find the offending <link> using the constant part of the text in the href.
2. Record that link's href.
3. Delete that link.
4. Use GM_xmlhttpRequest() to fetch the file again (hopefully it's cached).
5. Use regex to fix the fetched CSS.
6. Use GM_addStyle() to add the fixed CSS.

以下是完整的Greasemonkey脚本，用于说明该过程:

Here's a complete Greasemonkey script that illustrates the process:

// ==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()而不是GM_xmlhttpRequest()来获取CSS.
2. 如果由于启动延迟而导致页面闪烁是一件令人烦恼的事情"，那么这是另一个完全不同的问题，可以使用@run-at document-start和突变观测器来可能解决该问题.

1. For faster/better performance, if the CSS does not change often, hand edit it and save it in the same folder that you install your script from. Then use GM getResourceText() to get the CSS, instead of GM_xmlhttpRequest().
2. If page "flicker is an annoyance, due to start-up delays, that is a whole other problem, that can probably be solved with @run-at document-start and mutation observers.

这篇关于如何使用时尚或Greasemonkey替换@media(最大宽度)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！