As was foretold, we've added advertisements to the forums! If you have questions, or if you encounter any bugs, please visit this thread: https://forums.penny-arcade.com/discussion/240191/forum-advertisement-faq-and-reports-thread/

Meta viewport weirdness on desktop Chrome

apolloluxapollolux Registered User new member
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!

czjy2jo.png

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.

apollolux on
Sign In or Register to comment.