2011-02-24 20 views
17

ho un sito web mobile per iPhone e iPad, dove a disattivare utente lo zoom conSafari Mobile: la rotazione del dispositivo provoca cattiva desquamazione sito

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

questo funziona bene fino a quando il sito è in modalità orizzontale. la larghezza del sito web è esattamente la larghezza dello schermo. quindi, se si ruota il dispositivo in modalità verticale, viene ridimensionato in modo che si adatti alla nuova larghezza (più corta). anche questo è ok.

ma poi se lo ruoto di nuovo in modalità orizzontale viene improvvisamente ridimensionato a circa il 125% che significa che lo scorrimento orizzontale è ora possibile e lo zoom non è possibile poiché inizialmente disabilitato.

Come posso tornare indietro al 100% di zoom quando viene ruotato di nuovo in orizzontale?

grazie!

risposta

17

provare a sperimentare con la massima scala e minimo di scala in questo modo

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

e vedere se è possibile ottenere ciò che si sta cercando ..

+3

Ho appena eseguito alcuni test rudimentali e la per me ha funzionato miracoli: '' – Bitmanic

+0

La scala iniziale ha fatto il trucco anche per me - su l'iPad. – cbuck12000

+0

Questa è una buona soluzione per ciò che ritengo sia un bug nel safari mobile. Il metatag originale di clamp è il modo in cui normalmente creo i miei siti. Ho il sospetto che ci sia qualcosa nel DOM in Safari che non si comporta come previsto in alcuni siti per compromettere la larghezza della pagina che alla fine causa questo problema. – ghostfly

3

Utilizzando la maximum-scale e minimum-scale per fermare lo zoom don' Funziona davvero perché poi togli l'abilità dell'utente di zoomare. Questo è davvero una cattiva idea, perché rende gli utenti con gli occhi cattivi arrabbiato che il vostro sito non zoomare, mentre altri siti fanno ...

ho provato timeout e tutti i tipi di javascript fantasia, quindi ho trovato questo: https://github.com/scottjehl/iOS-Orientationchange-Fix

tramite questa domanda correlata: How do I reset the scale/zoom of a web app on an orientation change on the iPhone?

In quel post, Andrew Ashbacher postato un link al codice scritto da Scott Jehl:

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this); 

questo è un solut ion avvolto piacevolmente in un IIFE così non devi preoccuparti dei problemi di spazio dei nomi.

Basta inserirlo nella sceneggiatura (non in document.ready() se si utilizza jQuery) e viola!

Tutto ciò che fa è disabilitare lo zoom sugli eventi devicemotion che indicano che orientationchange è imminente. È la soluzione migliore che ho visto perché funziona davvero e non disabilita lo zoom.

MODIFICA: questo approccio non è sempre affidabile, specialmente quando si tiene l'ipad inclinato. Inoltre, non penso che questo evento sia disponibile per gli ipad di gen 1

8

Disabilitare lo zoom è una cattiva idea. Non è una soluzione perfetta, ma il ridimensionamento delle dimensioni dei caratteri sul cambiamento di orientamento del webkit può aiutare a minimizzare il problema.Si potrebbe lasciare la testa del documento con:

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

Poi si dovrebbe affrontare il ridimensionamento font-size nel CSS in questo modo:

body { 
    font-size: 1.5rem; 
    line-height: 2.3rem; 
    -webkit-text-size-adjust: 100%; 
} 
/* This prevents mobile Safari from freely adjusting font-size */** 
Problemi correlati