wake-up-neo.net

Problem mit der Schriftgröße auf Mobile Safari (iPhone) behoben, bei dem Text inkonsistent dargestellt wird und einige Schriftarten größer sind als andere?

Unsere Site wird auf Mobile Safari mit inkonsistenten Schriftgrößen dargestellt - und, soweit wir das beurteilen können, nur Mobile Safari. Das hat uns sehr gestohlen.

Wir haben die Site mit Firebug analysiert, und die fehlerhaften Bereiche erben die richtigen Stile, die Schriftarten werden jedoch immer noch mit der falschen Größe dargestellt.

1) Besuchen Sie http://www.panabee.com .

2) Suchen Sie nach einem Domainnamen.

Die Felder auf der linken Seite zeigen die falschen Schriftgrößen an. Die Schriftgröße sollte der Schriftgröße auf der rechten Seite entsprechen (sowohl Boxentitel als auch Boxenkopie). Zum Beispiel sind die Titel "Variationen" und "Twitter" viel größer als der Titel "Alternate Endings".

Irgendein Hinweis warum?

68
Crashalot

Mobile Safari (wie Chrome für Android, Mobile Firefox und IE Mobile) erhöht die Schriftgröße der Wide-Blöcke (immer), so dass Sie zweimal tippen, um den Block zu vergrößern (was zu dem Block passt) der Bildschirmbreite) wird der Text lesbar. Wenn Sie -webkit-text-size-adjust: 100% (oder none) festlegen, ist dies nicht möglich. Wenn also ein Benutzer doppelt auf breite Blöcke tippt, ist der Text unleserlich klein. Benutzer können es lesen, wenn sie hineinzoomen, aber dann ist der Text breiter als der Bildschirm und er muss horizontal schwenken, um jede Textzeile zu lesen!

  1. Im Idealfall können Sie dies beheben, indem Sie Responsive Web Design - Techniken verwenden, um Ihr Design an die Bildschirmgröße von Mobilgeräten anzupassen (in diesem Fall würden Sie keine sehr großen Blöcke mehr verwenden, sodass mobile Browser Ihre Schriftgröße nicht mehr anpassen würden).

  2. Wenn dies keine Option ist und Sie keine mobile Desktop-Website für mobile Benutzer bereitstellen, sollten Sie überprüfen, ob Sie das Design so anpassen können, dass keiner Ihrer Textblöcke breiter ist als die Breite des Mobilgeräts (z. B. 320px für viele Porträttelefone ) (Sie können mobile-spezifische CSS verwenden, um Auswirkungen auf Desktop-Browser zu vermeiden), dann muss Mobile Safari keine Schriftgrößen vergrößern (und Browser, die Textfluss wie den Android Browser und Opera Mobile umfließen), müssen ebenfalls nicht geändert werden Ihr Layout).

  3. Wenn Sie wirklich müssen müssen, um zu verhindern, dass Mobile Safari Ihre Schriftgrößen ändert, können Sie -webkit-text-size-adjust: 100% einstellen. Führen Sie jedoch nur als letzter Ausweg aus, da mobile Benutzer möglicherweise Schwierigkeiten beim Lesen haben Text, da er entweder zu klein ist oder nach jeder gelesenen Zeile von Seite zu Seite verschoben werden muss. Beachten Sie, dass Sie 100% nicht none verwenden müssen, da none in Desktop-Browsern unangenehme Nebeneffekte hat . Es gibt auch die entsprechenden -moz-text-size-adjust- und -ms-text-size-adjust-Eigenschaften für Mobile Firefox und IE Mobile.

Bearbeiten: In Ihrem Fall ist die einfachste Alternative wahrscheinlich die 2. Alternative. Sie können also folgendes CSS hinzufügen:

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
    table#all_results {
        width: auto;
    }
    td#main_box {
        width: 320px;
    }
    td#side_box {
        width: 320px;
    }
}

Allerdings ist es nicht ideal, 320px wie folgt zu kodieren. Sie können dies verbessern, indem Sie verschiedene CSS-Medienabfragen verwenden oder die Gerätebreite von JavaScript abrufen.

137
John Mellor

Was letztendlich funktioniert hat (nur auf dem iPhone 4 getestet):

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {      
        td#main_box { -webkit-text-size-adjust:100% }               
}

Wir haben John die Antwort gegeben, da seine Lösung die Basis für diese war.

Wahrscheinlich nicht die eleganteste Antwort, aber es funktioniert.

36
Crashalot

-webkit-text-size-adjust: none; führt dazu, dass Sie in mobilen Geräten nicht zoomen können. Sie sollten stattdessen 100% verwenden.

5
Webreality
-webkit-text-size-adjust:none;

wird wahrscheinlich dein problem lösen.

target-element { -webkit-text-size-adjust:80% } 

zoomt immer noch, hält es jedoch 80% kleiner als die Standardeinstellung für Webkits.

3
Thomas Maas

In meinem Fall hatte ich ein <p>-Element und ich habe dieses Problem gelöst, indem ich Folgendes hinzugefügt habe:

width: fit-content;

Dazu Ich konnte dies auch auf Safari Mobile reproduzieren.

0
Christian Adam