Mobile web: problema orientamento e scalatura nei dispositivi portatili iOS

Aggiornato il

Questo valore del meta tag viewport permette di ottimizzare un sito web per i dispositivi portatili come tablet e smartphones:


<meta name="viewport" content="initial-scale=1.0, width=device-width" />

Esiste tuttavia un bug in Mobile Safari (sistemato in iOS 6.0): quando l’utente ruota il dispositivo modificandone l’orientamento (da portrait a landscape o viceversa), una parte dello schermo verso destra viene tagliata, obbligando a fare “doppio-tap” sul sensore per ottenere lo zoom corretto.

C’è una soluzione al problema ideata da Shi Chuan, e migliorata in seguito da Jeremy Keith (che ha reso il markup della pagina html meno dipendente dallo script). Mathias Bynens ha ulteriormente lavorato sul codice, sfruttando querySelectorAll.

Basta inserire questo script nella <head> del proprio sito:


if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
	var viewportmeta = document.querySelector('meta[name="viewport"]');
	if (viewportmeta) {
		viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
		document.body.addEventListener('gesturestart', function() {
			viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
		}, false); 
	}
}

Il codice (che funziona sia per iPhone sia per iPad) fa esattamente questo:

  • La pagina è inizialmente scalabile poiché non viene settato alcun valore minimum-scale.
  • Caricato lo script, la pagina non è più scalabile poiché sia minimum-scale sia maximum-scale sono impostati a 1.0. Se l’orientamento del dispositivo viene cambiato dall’utente, il bug questa volta non scatta.
  • Se l’utente cerca di scalare la pagina, i due valori di minimum-scale e maximum-scale si aggiornano, permettendo l’operazione. Se quindi si tenta di cambiare orientamento, il bug si attiva perché la scalatura non è più bloccata.

di Mattia Frigeri

Lascia un commento

Puoi usare questi tags e attributi HTML se necessario:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*