Open Data Coder p3t3r67x0

Intro

http://socialdriver.com/2012/07/20-best-responsive-websites/ lists 20 sites that are supposedly best-in-class when it comes to responsive design techniques. I had a look at the viewport meta tags used in these sites.

All sites use width=device-width, with in most cases an additional initial-scale=1. This is good practice.

However:

8 sites turn off pinch-zooming by setting maximum-scale to 1, or using user-scalable=no. While there are some corner use cases for this, it does not make sense to do this on text-heavy sites as it impairs accessibility.
3 sites use semi-colons as delimiters between viewport values. While this works in newer mobile browsers, it's not officially supported, and breaks in older mobile browser versions.
1 site has 2 viewport meta tags (with different values) in the source...

	<?php $color = dechex(rand(0x000000, 0xFFFFFF)); ?>
	<body style="background-color: <?php echo $color; ?>;">
	<h1><?php echo $color ?></h1>
	</body>

	import os.path
	import ssl
	import sys
	import urlparse
	import urllib


	def check_ssl(hostname, port=443):
	'''Check that an SSL certificate is valid

	user www www;

	worker_processes 2;

	pid /var/run/nginx.pid;

	error_log /var/log/nginx/err.info.log info;

	worker_rlimit_nofile 20046;

	http {

	map $http_user_agent $limit_bots {
	default '';
	~*(google\|bing\|yandex\|msnbot) $binary_remote_addr;
	}

	limit_req_zone $limit_bots zone=bots:10m rate=1r/m;

	server {

	#!/bin/bash
	# A simple script to backup an organization's GitHub repositories.

	#-------------------------------------------------------------------------------
	# NOTES:
	#-------------------------------------------------------------------------------
	# * User @jimklimov (and probably some others called out in the long comment
	# thread below) have modified this script to make it more robust and keep
	# up with various changes in the GitHub API and response format at:
	# https://github.com/jimklimov/github-scripts

	@charset "UTF-8";

	@mixin grab-cursor {
	// http://www.google.com/intl/en_ALL/mapfiles/openhand.cur
	cursor: url('data:image/vnd.microsoft.icon;base64,AAACAAEAICACAAcABQAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8AAAA/AAAAfwAAAP+AAAH/gAAB/8AAA//AAAd/wAAGf+AAAH9gAADbYAAA2yAAAZsAAAGbAAAAGAAAAAAAAA//////////////////////////////////////////////////////////////////////////////////////gH///4B///8Af//+AD///AA///wAH//4AB//8AAf//AAD//5AA///gAP//4AD//8AF///AB///5A////5///8='), all-scroll;
	// cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: -o-grab;
	cursor: -ms-grab;
	cursor: grab;

	<!doctype html>
	<head>
	<meta charset=utf-8>
	<title>3D spin</title>
	<style>
	/*
	* nb: -webkit only for brevity. tested in chrome 21
	*/
	body {
	-webkit-perspective: 800px;

	/* ---------------------------------------------------------- */
	/* */
	/* A media query that captures: */
	/* */
	/* - Retina iOS devices */
	/* - Retina Macs running Safari */
	/* - High DPI Windows PCs running IE 8 and above */
	/* - Low DPI Windows PCs running IE, zoomed in */
	/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
	/* - Android hdpi devices and above */