Safari-zoom in/out-Ruinen-Seite layout (nicht ändern von schriftart,-Größe gut)

Zoom ist kompliziert, da Browser haben drei bedeutet, es zu tun:

1. Zoom-nur text (standard IE und Safari <= 3-Weg)
2. Intelligent zoom, die ganze Seite (Opera, FF 3+, Safari 4+, Chrome und IE 9 option)
3. Rendern der Seite bei "normaler" Größe, und skalieren das ganze (das iPhone Weg, optional in Safari 5 unter Lion)

Das problem ist, dass Browser nicht tun, diese intelligent:

• IE <= 9 wird nicht scale elements Größe in px, je. Wenn Ihre Seite verwendet alle Schriften in px, es muss nicht zoom. Wenn Sie dann geben Sie Ihre Basis-schriftart als so etwas wie 10px, IE Benutzer, die nicht Lesen können, Sie sind aus Glück heraus, es sei denn, Sie haben den IE 9.
• Safari (und einige andere) werden, wenn zoom-fonts nur, scale-up-Schriften in px, aber ohne Anpassung line-heights oder andere layout angegeben in px. Das ist erschwerenden um die extreme.
• Safari 4+ wird nicht skaliert, eine schriftart angegeben als Prozentsatz von einem Wert in px. Das heißt, falls Ihr base-Schrift 10px, und geben Sie einen Selektor, wie mit schriftart-Größe: 100%, jedes element und das Bild wird größer, aber der text dumm nicht. DIESE IST KAPUTT, und ich kann nicht bekommen, jemand bei Apple, um es zuzugeben. Chrom-wahrscheinlich leidet die gleiche Idiotie.

Eine Lösung

Soll ich sagen, der erste Schritt ist, um ernsthaft zu missbrauchen, wer zwingen würde, einen base-font-Website-Breite von 10px, weil mit immer höheren DPI-displays, ist nur eine grausame Sache zu zufügen. Ihre Benutzer. Aber das ist den Besucher der Lösung. Dir ist, wie ein Autor sollte ein bisschen anders:

1. Es sei denn, Ihre Website ist die Feste Breite 740px oder so etwas, oder die Basis-schriftart zu 1em und lassen Sie ihn dort. Wenn Sie nicht bekommen kann Weg von der 740px design-Modell, setzen Sie nicht Ihr Basis-schriftart, die kleiner als 12px. Mit 100 dpi: hiermit Bildschirme, 12px ist 8.6 pt. Bei 132 DPI (iPhone4 und der anstehenden andere Geräte), es ist 6.5 pt. Zugänglich für jedermann über dem Alter von 40 Jahren, es ist nicht sogar nahe, zu sagen, nichts von low-vision-Benutzer wie mich. Folglich ist die 10px Schrift, so beliebt bei Menschen, die scheinen zu denken, text ist ein "Akzent" auf eine Seite 5,5 pt auf 132 DPI-Bildschirm.
2. Wenn Sie Ihre header wird ein Bild kann man nicht vergrößern, stellen Sie sicher, dass Ihr header sieht gut aus, wenn alles, AUßER es skaliert. Geben Sie Ihren header-Schriften in px, das überschreiben der 1em in der Basis. IE <= 9 wird nie skalieren Sie, je. Safari < 4, vermutlich wird es vermasseln. Kann nicht wirklich geholfen werden.
3. Sicherzustellen, dass Ihre CSS-und layout erlauben vertikale oder scrolling overflow. Scrolling overflow funktioniert nicht auf iOS, aber alles, was wir haben es ist pinch-zoom sowieso. Es ist nicht schwer zu machen, Ihre Körper Inhalte werden fluid-Höhe. Fluid-Breite braucht mehr Arbeit (aber ich weiß, dass auch Sie persönlich!)
4. Nicht immer die Größe von Schriftarten in Prozentsätze. Verwenden Sie immer Fraktionen einer em. 1.2 em ist 120%. Ebenso 0.75 em ist 75%. Ich glaube nicht, jemals verwenden weniger als 0.75 em von der Basis-schriftart, und nur für Begleit-text.

Ergebnis

IE können vergrößern Sie Ihre Seite Stelle, aber nicht die header.

Safari 4 Zoomen der gesamten Seite. Durch die Vermeidung Prozentsätze der Basis-schriftart in px, vermeiden Sie eine Safari-bug kann ich nicht Apple zu bestätigen, wobei Schriften NIE zoom, auch wenn jeder andere Teil der Seite tut. Dies ist wahrscheinlich das problem, dass Sie sehen.

Dem iPhone wird wahrscheinlich auch in Zukunft davon abhängen, pinch-zoom, wenn Sie ein mobiles stylesheet. (Wenn Sie das tun, bitte don ' T set max-zoom: 1.0, es ist ärgerlich!)

Dass es in einer nussschale.

Ich verwendet, um zu vergrößern die Seite mit der css3-Eigenschaft

           ( vendor prefix ) - transform = scale( 10 unit);  
           exp : document.body.style.webkitTransform = "scale(10px , 10px)";

Neuesten Versionen von Browsern wie chrome , ffx sind scaling-Seite
Inhalte (Bilder , text , DOM-Elemente ) proportional
aber im safari-browser den text nicht skalieren es richtig frustrierend ist, vom Benutzer erwartet

es lässt text-Inhalten verschwommen

      I used to fix css3 zoom property instant of scale property
      it  makes the content zooming proportionally 

                   document.body.style.zoom = 1.1;