Userscript or -style to disable responsiveness of website

The following is a UserScript which will edit each page's CSS to always use the widest media rules:

// ==UserScript==
// @name         Disable Responsiveness
// @description  Always use the widest version of a responsive website
// @author       Ullallulloo
// @version      1.0
// @match        https://*/*
// @match        http://*/*
// @grant        GM.xmlHttpRequest
// @connect      *
// ==/UserScript==

for (let i = 0; i < document.styleSheets.length; i++) {
	const styleSheet = document.styleSheets[i];
	console.log(styleSheet);
	try {
		if (styleSheet.cssRules) {
			updateRules(styleSheet);
		}
	}
	catch(e) {
		if (e instanceof DOMException) {
			GM.xmlHttpRequest({
				method: "GET",
				url: styleSheet.href,
				onload: function(response) {
					const styleSheet = document.createElement("style");
					styleSheet.innerHTML = response.responseText;
					document.head.appendChild(styleSheet);
					updateRules(styleSheet.sheet);
				}
			});
		}
		else {
			console.log(e);
		}
	}
}

function updateRules(styleSheet) {
	for (let j = 0; j < styleSheet.cssRules.length; j++) {
		if (styleSheet.cssRules[j].media?.mediaText.includes("max-width")) {
			// console.log(`Deleteing rule ${styleSheet.cssRules[j].cssText}`);
			styleSheet.cssRules[j].media.mediaText = "(max-width: 0px;)";
		}
		if (styleSheet.cssRules[j].media?.mediaText.includes("min-width")) {
			// console.log(`Always using rule ${styleSheet.cssRules[j].cssText}`);
			styleSheet.cssRules[j].media.mediaText = "(min-width: 0px;)";
		}
	}
}

Note that sites, including Codidact often include CSS from third-party sites/CDNs, so any editing of them will require permission to handle cross-origin responses, which is a potentially dangerous permission to give out to untrusted code. You will have to explicitly agree to allow this permission for domains. Also, somewhat obviously, if you use a layout designed for a larger screen, some things may become undesirable sizes. It could potentially be tweaked to set a maximum width for styles to optimize the appearance for a device.

posted 5 months ago

CC BY-SA 4.0

5mo ago

Ullallulloo‭

171 reputation 1 4 19 4