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

74

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?

iphone  css  layout  mobile  mobile-safari 
— Crashalot
quelle
Keine Ahnung also. Ich habe meine Antwort gelöscht, weil es nur eine Vermutung war.
— 30.
— Timo Huovinen
für die Nachwelt: Es ist 2018 und dieser Beitrag ist immer noch hilfreich.
— Carter Pape

Antworten:

148

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.

— John Mellor
quelle
Danke, @John. Wenn Sie "Textblöcke" sagen, beziehen Sie sich auf den übergeordneten Container des Textes oder auf die tatsächliche Textmenge? Mit anderen Worten, für die Abschnittsüberschriften wie "Variationen" und "Übersetzungen", die nur Text enthalten, der nur wenige Zeichen lang ist, müsste ich sie in ein anderes DOM-Element einschließen (z. B. span mit Anzeige des Inline-Blocks).
— Crashalot
@Crashalot: Mit Textblöcken meine ich Elemente mit display:block<p> -Tags. In Ihrem Fall scheinen Sie beide Spalten nur 320 Pixel breit zu machen - siehe das Beispiel-CSS, das ich meiner obigen Antwort hinzugefügt habe (dies könnte wahrscheinlich verbessert werden, um Variationen der Bildschirmgröße besser zu handhaben). Testen Sie nach Möglichkeit, wie es auf realen Geräten aussieht. Sie können jedoch weiter optimieren, z. B. erweiterbare Abschnitte wie en.m.wikipedia.org/wiki/Mobile_Web, damit der Benutzer nicht so viel scrollen muss, um die Abschnitte zu finden, die ihn interessieren.
— John Mellor
Bitte beachten Sie, dass die tatsächliche Lösung unten ist. Wir haben @John die Punkte verliehen, da er die endgültige Lösung inspiriert hat.
— Crashalot
@ John: Was wäre, wenn ich responsives Webdesign verwenden würde? Was wäre dort die Lösung? Die einzige Option, die ich mir ausgedacht habe, ist das Festlegen einer Breite für das Blockelement ( p). Aber dann müsste ich mir aller Größen und Ausrichtungen bewusst sein ... Ich möchte nur, dass zwei pElemente die gleiche Schriftgröße haben ...
— Testen
1
@testing: Die automatische Textgröße wirkt sich nur auf Textspalten aus, die breiter (in CSS-Pixeln) als die Bildschirmbreite des Geräts (in dichteunabhängigen Pixeln) sind. Wenn Sie responsives Webdesign verwenden, haben Sie <meta name = "viewport" content = "width = device-width"> oder ein gleichwertiges Element. Dies bedeutet, dass Ihre Seite niemals breiter als der Bildschirm des Geräts ist, sodass die automatische Textgröße keine Auswirkungen hat. und Sie müssen sich keine Sorgen machen. (In Chrome für Android gibt es eine kleine Einschränkung - crbug.com/252828 - aber selbst das sollte normalerweise relativ gering sein).
— John Mellor
40

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.

— Crashalot
quelle
3
Der Vollständigkeit -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%;
— halber
6

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

— Webrealität
quelle
3 
-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.

— Thomas Maas
quelle
2
Danke, @Thomas. Dies ist nicht ausreichend, da auch die Größenänderung der Schriftart beim Vergrößern und Verkleinern deaktiviert wird, was unerwünscht ist. Ziel ist es, die Größenänderung von Safari basierend auf Zooms beizubehalten und gleichzeitig die vom CSS definierte Konsistenz der Schriftgröße beizubehalten.
— Crashalot
1

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.

— cSn
quelle
0

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.
     }
— SantoshK
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.