1. Zuhause
  2. Frage und Antwort
  3. Android Browser skaliert Text automatisch

Android Browser skaliert Text automatisch

2012-06-10 4 views
5

Ich habe ein Projekt, das 16px Textschrift bei 0,5ems Links auf dem iPhone zeigt perfekt in Ordnung.Android Browser skaliert Text automatisch

Allerdings, wenn ich zu einem Android-Browser wechseln, vergrößert sich die Textschrift selbst und meine Positionierung der Links sind geschraubt.

sind meine Links in einem

<p><a>[Link]</a></p>

Aussage.

Gibt es eine Möglichkeit, die Größe des Android-Textes zu verhindern? Oder gibt es dafür eine bessere Lösung?

EDIT:

Ich habe erkannt, das Android-Browser nicht für die automatische Scrollen auch erlaubt. Warum ist das so? Sind nicht sowohl der iPhone- als auch der Android-Browser Webkits als Basis? Warum sind sie so unterschiedlich, obwohl sie die gleiche Technologie verwenden? Gibt es irgendwelche zusätzlichen Attribute, die ich in CSS deklarieren sollte, damit es genauso funktioniert wie das Gegenstück von Safari?

Quelle

2012-06-10 Kyle Yeo

+0

Ich habe gerade festgestellt, dass der Android-Browser auch kein automatisches Scrollen erlaubt. Warum ist das so? Sind nicht sowohl der iPhone- als auch der Android-Browser Webkits als Basis? Warum sind sie so unterschiedlich, obwohl sie die gleiche Technologie verwenden?Gibt es irgendwelche zusätzlichen Attribute, die ich in CSS deklarieren sollte, damit es genauso funktioniert wie das Gegenstück von Safari? –

+0

Können Sie beide Bildschirme anzeigen - Android und Telefon, um den Unterschied zu sehen? :) –

+0

hmm, wie drucke ich in Android? –

Antwort

3

ich auch ein ähnliches Problem hatte. Ich hatte ein Design, das speziell für das Retina-Display entworfen wurde, aber das Retina-Display hat tatsächlich eine Pixeldichte von 2, so dass ein Pixel nicht unbedingt ein Pixel ist (nicht Retina-Pixelbreite: 320px, Retina: 640px).

Um das zu beheben, legte ich dies in die <head>: <meta name='viewport' content='width=device-width, initial-scale=.5, maximum-scale=.5'>, so dass ein normales Telefon wird skalieren, wie ich es erwarte, und die Retina-Anzeige würde entsprechend skalieren (halbe Skala).

Ich bin mir nicht sicher, welche Art von Design Sie verwenden, aber ich würde mit der anfänglichen Skala und Maximum-Skala spielen, versuchen beide .5 und 1 und sehen, was Sie bekommen.

Quelle

2012-06-18 20:40:28 LOLapalooza

+0

Vielleicht nicht so komisch angesichts der Werte im Attribut, aber das Schnittfenster für mich auf iOS und Android halbiert, der linke Teil der Seite sieht gleich aus, aber die rechte Seite ist einfach leer :) –

2

Wenn Sie Pixel (px) verwenden, bezieht sich dies auf die Bildschirmpixeldichte. Ein iPhone "Retina" -Display würde Text anders als Ihr Android-Gerät anzeigen.

Dieser Artikel behandelt das Thema ziemlich gut: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Quelle

2012-06-10 05:28:09

+0

Sache ist, ich habe nur dieses px Element in meiner Körperaussage. der Rest meiner css Medienabfragen sind alle in ems. Ist das einzelne px der Rest? Ich habe versucht, die Größe zu ändern, aber es bleibt immer noch gleich. –

+0

@RenoYeo Hmm. Das Addendum zu diesem Post, das ich oben verlinkt habe, schlägt vor, Prozent (%) für die Schriftgröße des Körperelements zu verwenden, anstatt Pixel (px). Dies sollte dazu führen, dass die Dinge unabhängig von der Bildschirmgröße gut skaliert werden. Hilft es? –

+0

also 100% ist eigentlich 16px, oder? Ich werde versuchen, und Ihnen sagen, wie es geht –

2

fand ich eine Einstellung, die in einer anderen Frage helfen könnte, Font size rendering inconsistencies on an iPhone:

body { 
    -webkit-text-size-adjust: 100%; 
}

Ein alternativer Wert in einer anderen Frage beschrieben wird, Font size issue with iPhone:

html { 
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */ 
}

Scheint wie eine von ihnen könnte das verhindern Android-Browser von der Größenänderung. Hoffe das hilft.

Quelle

2012-06-18 21:46:19 trebormf

 Verwandte Themen

  • Keine verwandten Themen^_^