Se sei un web designer, il bug noto comeViewpoint Scaling potrebbe averti confrontato con ciò che si verifica nei dispositivi Apple, ad esempio iPod, iPhone e iPad. A volte, quando ruotiamo il nostro dispositivo Apple dall'orientamento verticale a quello orizzontale, il sito ingrandisce, mostrandoci una vista che ha una larghezza maggiore della larghezza del dispositivo. Questo perché il designer ha impostato la larghezza della finestra sulla larghezza del dispositivo. Per aiutarti a farti un'idea di come funziona questo bug, abbiamo progettato una pagina di esempio e ruotato il nostro iPad da verticale a orizzontale.
Una rapida soluzione per detto bug ci guida a impostare il"Massima scala = 1" nel metatag della vista. Questo risolve il problema per il momento, ma la pagina non è più in grado di eseguire lo zoom perché fissiamo la larghezza massima simile alla larghezza del dispositivo.
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
Questa soluzione rapida non è esattamente la soluzione perfetta. Attraverso il duro lavoro di designer come @mathias, @cheeaun e @jdalton, ora abbiamo un javascript che può essere aggiunto alla sezione <head> per ottenere una soluzione permanente. Con questa soluzione, la pagina rimarrà in grado di eseguire lo zoom.
<script type="text/javascript">
(function(doc) {
var addEvent = "addEventListener",
type = "gesturestart",
qsa = "querySelectorAll",
scales = [1, 1],
meta = qsa in doc ? doc[qsa]("meta[name=viewport]") : [];
function fix() {
meta.content = "width=device-width,minimum-scale=" + scales[0] + ",maximum-scale=" + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>Queste sono le uniche soluzioni conosciute che i designer hanno escogitato finora. Ma se ne hai un altro per correggere questo errore, condividilo con noi nei commenti.
Commenti