Per un progetto sto testando le varie pagine in modo che siano visibili anche su iPad

Nello sviluppo ci siamo accorti che in certi template si verificavano in modo impredicibile, dei piccoli errori di rendering che su Safari invece non c'erano. Tali errori consistevano in linee orizzontali e verticali, bordi di colori diversi, immagini ripetute altrove nella pagina per pochi pixel.

Il primo approccio (funzionante) consiste nel definire un elemento meta nell'header della pagina che forza il fattore di zoom minimo a 1, ma di fatto impedisce alla pagina di scalare quando l'iPad cambia il suo orientamento.

codice:
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
Un approccio che preserva il corretto rescale della pagina è quello di assegnare un handler agli eventi domready e onorientationchange del body. In tale handler vanno referenziati i contenitori che presentano il problema e si assegna loro uno zoom usando la proprietà -webkit-transform, andando per tentativi.

Ad esempio questo è il pezzo di codice che abbiamo inserito per togliere un artefatto nel <footer> e non impedisce un corretto rescale della pagina

codice:
if (!!navigator.userAgent.match(/i(Pad|Phone)/i)) {

	$('body').bind('orientationchange', function() {
		if (!!(Math.abs(window.orientation) == 90)) {
   			// landscape
			$('footer').css('-webkit-transform', 'scale(0.99)');
		} 
		else {
   			// portrait
			$('footer').css('-webkit-transform', 'scale(1.0)');				
		}
	});
}

E' evidente però che questa soluzione è un workaround: non è praticabile se gli elementi da correggere sono molti, visto che richiede di determinare selettivamente pagina per pagina gli elementi e stabilire quale fattore di zoom per ciascun orientamento risolve il problema.

Qualcuno vuole aggiungere qualcosa su questo problema o l'ha incontrato risolvendolo in altro modo?