Website-Elemente und font sind zu klein für die Handys

Habe ich gerade fertig mit der Gestaltung und Codierung von meinem neuen Projekt. Aber ich brauche es für den Einsatz in Handys. Ich geändert mein Bildschirm so etwas wie 350~400px Breite und fing mit der Entwicklung und dem hinzufügen von ein paar media-queries, um es. Sieht toll aus in redimensioned Browser. Ich Schnitt einige Elemente und Funktionen, und alles war in Ordnung... bis ich es getestet mit meinem smartphone

Dem Bildschirm ist nicht groß. Weniger als 4' (vermutlich 3.5). Ich habe einige Warnungen im code und realisiert seine Breite war 980px. Fast 3-mal größer als meine tests an verkleinerten Browser.

Alles ist einfach zu klein. Andere Dinge sind groß: media queries arbeiten, die Schnitte, die ich in dem code sind auch ok, aber man kann kaum sehen, der Inhalt in meinem Handy. Dies ist sicherlich nicht, den ich wollte.

Ich will dass es aussieht wie ein App und ja es sieht aus wie eine app auf dem redimensioned browser.

Wie erstellen Sie Ihre responsive websites, Umgang mit Problemen wie diesem?

Lese ich etwas über die Verwendung EM (und gibt es etwas neues genannt REM) - Einheiten, aber ich bin immer noch sehr verwirrt darüber. Muss ich ALLE ändern, die px zu em?

Und ich weiß auch, Sie können die font-size im html oder body - tags und alle anderen Elemente, von der Sie Erben. Ist das ein Ansatz weiter? Was machen Sie normalerweise? Gibt es da einen trick oder sowas??? Ich bin nicht mit bootstrap-noch eine andere front-end-framework

  • anwenden von font-size, um Ihren Körper mit media-query ist ein guter Ansatz.
  • du meinst die schriftart,-Größe, kombiniert mit em Einheiten?
  • schriftart-Größe in Prozent, die für Ihren Körper
  • aber was ist mit den Höhen und breiten der anderen Elemente?
InformationsquelleAutor Victor Ferreira | 2015-01-09
  1. 60

    Können Sie versuchen die viewport <meta> tag :

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

    Über die viewport-meta-tag, um Kontrolle über das layout, die auf mobilen Browsern

    • wird chrome verstehen viewport? wie funktioniert das im desktop-Browser? tun Sie es ignorieren?
    • Der mobile browser muss wissen, wie interpretieren Sie die meta-tag(w3schools.com/tags/tag_meta.asp)
    • ich machte einen Versuch und es klappte. ich habe gerade einige Probleme mit Schriftrollen (auf der x-Achse)
    • Diese Lösung macht meine Bilder eher verschwommen. Es wäre schön, eine Lösung, bei der die Bildschärfe, die ich ohne diesen meta-tag.
    InformationsquelleAutor Spock
  2. 1

    Verwendung von media queries (Link) und Prozentwerte (%), 16px (Standard-Schriftgröße) = 100%. Ich hoffe, es hilft.

    • html {font-size:16px;} ist der defacto-standard, ist aber nicht garantiert, um wahr zu sein und kann überschrieben werden, indem Benutzer-Stylesheets.
    InformationsquelleAutor mainronindeveloper
Schreibe einen Kommentar