Fixieren der Site-Größe in FireFox vs Chrome auf großen Bildschirmen

Es scheint, dass Gecko, Trident und Webkit eine andere Möglichkeit haben, Webseiten auf hochauflösenden Bildschirmen anzuzeigen. Webkit-Browser wie Chrome und der neue Opera zoomen die Seite heraus, um sie der Pixelauflösung des Bildschirms anzupassen. Dies kann jedoch dazu führen, dass kleiner Text sehr schwer zu lesen ist.Fixieren der Site-Größe in FireFox vs Chrome auf großen Bildschirmen

Firefox und Internet Explorer scheinen dagegen einige Standardgrößen zu haben, und wenn die Auflösung größer ist, werden sie vorgeben, dass der Bildschirm eine niedrigere Auflösung hat, und stattdessen die zusätzlichen Pixel verwenden, um das Anti-Aliasing zu verbessern.

Jetzt das Problem: Wie bekomme ich die Größe meiner Websites in diesen verschiedenen Browsern übereinstimmen? Der Unterschied auf meinem 1920x1080-Display beträgt etwa 20% (Sie müssen Webkit-Browser auf etwa 120% der normalen Größe zoomen, um der Ansicht in den anderen Browsern zu entsprechen)

Gibt es einen CSS-Hack, der @viewport oder einen anderen Weg missbraucht? um sicherzustellen, dass die Seite in allen Browsern gleich aussieht? Diese Meta-Tag in Ihrem <head> Tag

Quelle

2014-04-17 Qqwy

verwenden. Es könnte sein, dass Sie nur nach dem Meta-Viewport-Tag ' suchen '? – Netsurfer

Leider ist es nicht. Das behebt das Problem nicht (obwohl es auf mobilen Geräten mit anderen Problemen hilft, die nichts mit diesem Problem zu tun haben) – Qqwy

Die einzige "Lösung", die ich bisher gefunden habe, ist die Änderung aller Pixelwerte in relative Werte (zB Prozent oder em). und die Größe des Körpers in bestimmten @media-Bildschirmbedingungen auf eine andere Größe ändern. – Qqwy

Try

<meta name="viewport" content="width=device-width, initial-scale=1">

Verwenden Sie ein CSS-Reset konsistentes Verhalten in allen Browsern zu bekommen, um zu versuchen hinzufügen.

http://meyerweb.com/eric/tools/css/reset/

http://developer.yahoo.com/yui/reset/

relative Schriftgrößen in Einheiten verwenden wie ‚em‘ oder ‚%‘ ist eine andere Lösung.

Quelle

2014-04-22 11:20:37

Dies hilft, um die Website auf verschiedenen mobilen Geräten ähnlich aussehen, hilft aber nicht auf Desktop, der die Zielplattform dieses Problems ist. – Qqwy

@Qqwy Ich habe meine Antwort bearbeitet. Bitte versuchen Sie die Lösung. –

OK, so angenommen Sie bereits das Meta-Tag-Ansichtsfenster verwenden

<meta name="viewport" content="width=device-width, initial-scale=1.0">

fügen Sie folgendes zu Ihrem CSS:

html { 
    font-size: 100%; 
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
}

Siehe auch MDN - text-size-adjust

Quelle

2014-04-22 14:57:29 Netsurfer

ich derzeit nicht über ein HiDPI-Display zum Testen, aber hier ist, was ich vorschlage:

Sie haben erwähnt, dass Sie relative Einheiten verwenden, was ich für eine gute Idee halte. Wie andere bereits erwähnt haben, ist es auch eine gute Idee, das Meta-Viewport-Tag zu verwenden, um Ihre Breite einzustellen: <meta name="viewport" content="width=device-width, initial-scale=1">.

Was ich hinzufügen würde, ist Medienabfragen für verschiedene Pixeldichten. Zum Beispiel verwende ich dies derzeit in einem meiner Projekte:

@media 
only screen and (-webkit-min-device-pixel-ratio: 1.3), 
only screen and (-o-min-device-pixel-ratio: 13/10), 
only screen and (min-resolution: 120dpi) { 
    /* style here */ 
}

Sie könnten dies auch mit absoluten Breite Abfragen kombinieren.

Einige Referenzen:

... Oder Sie könnten ein max-width auf Ihrem body

Quelle

2014-04-23 17:24:51 Daze

Fixieren der Site-Größe in FireFox vs Chrome auf großen Bildschirmen

Antwort

Verwandte Themen