Aloha ;)

Ich glaube, Gunnar meinte damit etwas anderes. Wie ich Gunnar kenne, zielte er damit eher in die Richtung: Auf responsive designten Webseiten sollte man nicht zoomen müssen.

Übrigens glaube ich, dass du selbst noch nicht ganz verstanden hast, wo das Problem liegt. Ich versuch mich mal an einer Aufklärung.

Dein Text schiebt sich beim Zoomen nicht "unter" die Navigation. Du wirst feststellen: Beim Zoomen kannst du dann horizontal scrollen. Und wenn du ganz nach links scrollst bekommst du die Sache so wie du sie haben willst, der von dir vorgesehene Abstand bleibt also vorhanden.

Das liegt grundsätzlich daran, dass der Pinch-Zoom offenbar anders funktioniert als normaler Zoom. Der normale Zoom verändert intern - so wie ich das sehe - die virtuelle Viewportgröße und stellt dadurch alles größer, aber in gleichen Proportionen dar. Zum Nachprüfen: Wenn du (ich nutze Google Chrome unter Windows, andere Browser verhalten sich u.U. anders) den Zoom erhöhst, stellt deine Testseite irgendwann auf mobiles Layout um.

Der Pinch-Zoom tut etwas anderes. Er behält die virtuelle Viewportgröße (die, die der Webseite bekannt ist) und verkleinert lediglich den sichtbaren Bildausschnitt (auch hier: meine Testergebnisse kommen von Chrome mobile / Android).

Was das für einen Unterschied macht: Unter Android bleibt die Navigation an den Bildschirm angeheftet, während sich alle Proportionen verschieben, an der Darstellungsbreite der Seite (und damit am Umbruchverhalten) ändert sich nix. Das ist in etwa der Effekt, den du erhalten würdest, wenn du für deinen body eine Breite erzwingst, die über die Viewportgröße hinausgeht.

Fazit: Du musst die Positionierung deiner Navigation anders lösen. position:fixed ist hier wohl nicht geeignet. Oder: Du ignorierst das einfach - warum auch mit Mobilgerät zoomen, wenn dein Design ordentlich responsiv ist? Zumal man durch horizontales Scrollen immer noch alles sieht.

Was du noch versuchen kannst: Ich weiß ja nicht... Vielleicht lohnt es sich mal zu testen, ob der Pinch-Zoom die Viewport-Größe beibehält und beim Zoomen lediglich die Device-Größe runtersetzt. Vielleicht kannst du so über media-query das Pinch-Zoom-Verhalten mit abfangen? Probiers doch mal aus ;) Wäre sicher für alle interessant.

Grüße,

RIDER