How to disable responsive web design / media queries dynamically

How to disable responsive web design / media queries dynamically

One of the disadvantages of responsive design is the inability to revert back to the desktop site, and view the “full site” from a mobile device. The CSS standard is not very helpful with that since media queries are static and cannot be changed ones processed in the browser.

Luckily we can have some control using JavaScript. Pay attention that the following code will work only for style sheets from the same domain as the original website.

Here is a short explanation on what the code is actually doing:

  1. First we define two regular expressions; the first one remin will find min-width definitions that are applicable only on desktop version and that we would want to apply them on the mobile. The second one remax will find max-width definitions that are applicable only on mobile (Smartphones or Tablets) and that we want to disable from the mobile version.
  2. Thereafter, the code will find all CSS rules from all style sheets, and will check the media query text for each one of them. In case there is a match it will either remove the media query or set it to max-width:1px.
var remin = /(min-width\s*:\s*768px)|(min-width\s*:\s*980px)/i; 
var remax = /(max-width\s*:\s*979px)|(max-width\s*:\s*767px)|(max-width\s*:\s*480px)|(max-width\s*:\s*1049px)/i;
function removeRWD() {
	var styleSheets = document.styleSheets;
	if (!styleSheets) return;

	for (var i = 0; i < styleSheets.length; i++) {
		var cssRules = styleSheets[i].cssRules;
		if (!cssRules) continue;

		for (var j = 0; j < cssRules.length; j++) {
			if (cssRules[j] instanceof CSSMediaRule) {
				if (cssRules[j].media.mediaText.match(remin) != null) {
					cssRules[j].media.mediaText = "";
				if (cssRules[j].media.mediaText.match(remax) != null) {
					cssRules[j].media.mediaText = "(max-width:1px)";