Die Seite wird verkleinert, wenn das Menü geöffnet wird

Question

Ich benutze die PureCSS-Bibliothek von Yahoo zusammen mit einem Plugin für die Seitenleiste und es funktioniert gut auf allen Browsern außer Mobile Safari. Aus irgendeinem Grund zoomt es aus, wenn das Menü geöffnet wird. Dies geschieht sogar in der Dokumentation example. Ich habe keine Ahnung, was das verursachen könnte, aber es ist verlockend, es einfach einen Browser-Bug zu nennen.

Ich kann ein JSFiddle bei Bedarf zusammenstellen.

Answer 1

Diese Frage lief tatsächlich auf das gleiche wie Does overflow:hidden applied to work on iPhone Safari?. Ich denke, Mobile Safari verkleinert Raum für das Menü zu machen und den Inhaltsbereich, wenn der Benutzer das Menü öffnet, wenn Sie dieses Element auf einem Wrapper tun:

html, 
body { 
    overflow-x: hidden; 
} 

Answer 2

Das Viewport-Meta-Tag enthält keinen maximalen Maßstabswert. Wenn Sie das Ansichtsfenster-Tag, das folgende Update, werden Sie nicht die gleiche Zoom erhalten, wenn der Benutzer auf das Menü klickt:

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

Notiere die Zugabe von maximum-scale=1 bis zum Ende des Strings. Wenn dies hinzugefügt wird, wird der Inhalt verschoben, statt herauszuzoomen. Dies wurde gegen die PureCSS Demoseite für die Responsive Side Menu, oben verlinkt, getestet.