Il sito esegue lo zoom indietro quando il menu è aperto

Question

Sto utilizzando la libreria PureCSS di Yahoo insieme a un plug-in per la barra laterale e funziona perfettamente su tutti i browser ad eccezione di Safari mobile. Per qualche ragione, si ingrandisce ogni volta che si apre il menu. Questo si verifica anche nella documentazione example. Non ho idea di cosa potrebbe causare questo, ma si è tentati di chiamarlo solo un bug del browser.

Posso mettere insieme un JSFiddle se necessario.

Answer 1

Questa domanda in realtà si riduce a essere la stessa di Does overflow:hidden applied to work on iPhone Safari?. Credo che Safari Mobile sarà diminuire per fare spazio per il menu e l'area del contenuto quando l'utente apre il menu, a meno che non si esegue questa operazione su un elemento di involucro:

html, 
body { 
    overflow-x: hidden; 
} 

Answer 2

Il meta tag viewport non contiene un valore di scala massimo. Se si aggiorna il tag viewport al seguente, non sarà possibile ottenere lo stesso zoom ogni volta che l'utente fa clic sul menu:

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

nota l'aggiunta di maximum-scale=1 alla fine della stringa. Quando viene aggiunto, il contenuto scorre su anziché fuori. Questo è stato testato sulla pagina demo PureCSS per il Responsive Side Menu, collegato a sopra.