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

Unsere Website wird in Mobile Safari mit inkonsistenten Schriftgrößen gerendert - und soweit wir das beurteilen können, nur in Mobile Safari. Das hat uns sehr verblüfft.

Wir haben die Site mit Firebug analysiert und die falschen Bereiche erben die richtigen Stile, aber die Schriftarten werden immer noch mit den falschen Größen gerendert.

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

2) Führen Sie eine Suche nach einem Domainnamen durch.

Die Felder auf der linken Seite zeigen die falschen Schriftgrößen. Die Schriftgröße sollte mit der Schriftgröße auf der rechten Seite übereinstimmen (sowohl Box-Titel als auch Box-Kopie). Beispielsweise sind die Titel "Variationen" und "Twitter" viel größer als der Titel "Alternative Endungen".

Irgendein Hinweis warum?

Mobile Safari (wie Chrome für Android, Mobile Firefox und IE Mobile) erhöht die Schriftgröße von breiten Blöcken (jederzeit). Wenn Sie also zweimal auf tippen, um diesen Block zu vergrößern (der den Block an die Bildschirmbreite anpasst) wird der Text lesbar sein. Wenn Sie -webkit-text-size-adjust: 100%(oder none) festlegen , ist dies nicht möglich. Wenn ein Benutzer zweimal auf große Blöcke tippt, um sie zu vergrößern, ist der Text unleserlich klein. Benutzer können es lesen, wenn sie zoomen, aber dann ist der Text breiter als der Bildschirm und sie müssen 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 hätten Sie keine sehr breiten Blöcke mehr, sodass mobile Browser Ihre Schriftgrößen nicht mehr anpassen würden).

2. Wenn dies keine Option ist und Sie keine Desktop-Site für mobile Benutzer bereitstellen möchten, prüfen Sie, ob Sie Ihr Design so anpassen können, dass keiner Ihrer Textblöcke breiter als die Gerätebreite des Mobilgeräts ist (z. B. 320 Pixel für viele Hochformat-Telefone) ) (Sie können mobilspezifisches CSS verwenden, um Auswirkungen auf Desktop-Browser zu vermeiden), dann muss Mobile Safari keine Schriftgröße erhöhen (und Browser, die Text neu fließen lassen, wie der Android-Browser und Opera Mobile, müssen sich ebenfalls nicht ändern Ihr Layout).

3. Wenn Sie Mobile Safari wirklich daran hindern müssen, Ihre Schriftgrößen anzupassen, können Sie dies festlegen -webkit-text-size-adjust: 100%. Dies ist jedoch nur ein letzter Ausweg, da mobile Benutzer wahrscheinlich Schwierigkeiten haben, Ihren Text zu lesen, da er entweder zu klein oder zu klein ist Sie müssen nach jeder Zeile, die sie lesen, von einer Seite zur anderen schwenken. Beachten Sie, dass Sie 100%nicht verwenden dürfen, noneda keine in Desktop-Browsern böse Nebenwirkungen hat . Es gibt auch Äquivalente -moz-text-size-adjustund -ms-text-size-adjustEigenschaften für Mobile Firefox und IE Mobile.

Bearbeiten: In Ihrem Fall ist beispielsweise die einfachste wahrscheinlich die zweite Alternative. Sie können also versuchen, das folgende CSS hinzuzufü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;
    }
}

Obwohl es nicht ideal ist, 320px so fest zu codieren; Sie können dies verbessern, indem Sie verschiedene CSS-Medienabfragen verwenden oder die Gerätebreite über JavaScript abrufen.

Folgendes hat letztendlich funktioniert (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 Grundlage für diese war.

Wahrscheinlich nicht die eleganteste Antwort, aber es funktioniert.

-webkit-text-size-adjust: none;Dies führt dazu, dass Sie mobile Geräte nicht vergrößern können. Sie sollten 100%stattdessen verwenden.

-webkit-text-size-adjust:none;

wird wahrscheinlich Ihr Problem lösen.

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

wird immer noch zoomen, bleibt aber 80% kleiner als die Standard-Webkits.

In meinem Fall hatte ich ein <p>Element und löste dieses Problem durch Hinzufügen von:

width: fit-content;

Dazu. Ich konnte dies auch auf Safari Mobile reproduzieren.

Ich habe ein Problem mit der Schriftgröße behoben, indem ich CSS-Hack für die IOS-App und den IOS-Safari-Browser verwendet habe.

@supports (-webkit-touch-callout: none) {
       //you can write your custom css for IOS safari browser.
     }