Meta viewport weirdness on desktop Chrome

apollolux

Hello there! I previously wrote about this issue in an incorrect section of the boards, so I'm posting here for official posterity.

I wanted to bring to attention a visual issue related to the HTML used for the site. I just updated my version of desktop Google Chrome to 35 and upon visiting the PA comic page was greeted to a very zoomed-in layout. The front page was zoomed in as well. Warning: large image!



These boards are fine, however.

Inspection of the live HTML in question reveals that the viewport <meta> tag sets the viewport width value to a hard 1090px instead of the recommended value of device-width; changing the width to device-width in the Web Inspector resolves the issue on desktop and I expect would resolve whatever visual zoom issues may currently exist on mobile as well. My particular computer is a 17" laptop with a 1920*1080 resolution and the specific window that has the PA tab is about 1700-1750px wide or so, so a hardcoded viewport width of any px value would likely trigger it.

In my case, I also enabled "Enable viewport meta tag" in chrome://flags/, so that almost certainly has something to do with it as well. I'm a web dev and I generally need to keep that setting on for web dev purposes since I don't want to waste time toggling it back and forth, restarting the browser each time.

I wrote a userscript to automatically change width in meta viewport to device-width, height to device-height, and add initial-scale=1.0 if it's not present:

// ==UserScript==
// @name           Fix Viewport
// @namespace      apollolux
// @description    Set hardcoded pixel viewports to device-width/device-height and a zoom of 1.0
// @include        http://*
// @include        https://*
// @run-at         document-end
// @version        1.0.0.0g
// ==/UserScript==


function replaceViewport() {
	var m = document.getElementsByTagName('meta'), rp = [false, false, false];
	for (var i=0; i<m.length; ++i) {
		if (rp[0]&&rp[1]) break;
		if (m[i].name.toLowerCase()!=='viewport') continue;
		else if (m[i].content.indexOf('width=')<0&&m[i].content.indexOf('height=')<0) continue;
		else {
			var s = m[i].content.trim(), c = s.split(',');
			var j=c.length; while (--j>-1) {
				var token = c[j].trim().split('='), q = token[0].trim().toLowerCase();
				if (rp[0]&&rp[1]&&rp[2]) break;
				else if (q!=='width'&&q!=='height'&&q!=='initial-scale') continue;
				else if (q==='width'&&!rp[0]) {
					if (token[1].trim()!=='device-width') {
						// replace with device-width
						token[0] = q;
						token[1] = 'device-width';
						c[j] = token.join('=');
					}
					rp[0] = true;
				}
				else if (q==='height'&&!rp[1]) {
					if (token[1].trim()!=='device-height') {
						// replace with device-height
						token[0] = q;
						token[1] = 'device-height';
						c[j] = token.join('=');
					}
					rp[1] = true;
				}
				else if (q==='initial-scale'&&!rp[2]) {
					if (token[2].trim()!=='1.0') {
						// replace with 1.0
						token[0] = q;
						token[1] = '1.0';
						c[j] = token.join('=');
					}
					rp[2] = true;
				}
			}
			if (rp[0]||rp[1]||rp[2]) {
				if ((rp[0]||rp[1])&&!rp[2]) c.push('initial-scale=1.0');
				//console.log("meta viewport",s,c.toString());
				s = c.toString();
				m[i].content = s;
				//console.log("new meta viewport",m[i]);
			}
			break;
		}
	}
}


var oldload = window.onload;
window.onload = function() {
	if (oldload&&typeof oldload==='function') oldload();
	replaceViewport();
}

If the site is going to make a genuine effort to update the layout for mobile and such, best practice is to use device-width/height instead of finite numbers and explicitly set initial-scale. The Reddit and Apple websites have the same problems and I brought it to the attention of Reddit's devs. I'm confident other websites have the same problem, though I don't come across them in my regular surfing.

I realize the previously mentioned chrome flag is relatively non-standard and on desktop it's most likely the biggest contributor to the viewport zoom problem, but I can't simply turn it off just because an individual site or relatively small group of sites don't use the recommended values for setting meta viewport.