Smartphone Browser Auflösung

  • Ich frage mich welche Auflösungen Firefox als Browser für Android Smarphones und Tablets anwendet.
    Wenn wir 1080p Geräte haben, welche Auflösung wird maximal vom Browser simuliert?

    Ich weiss dass zum Beispiel das iPad 4 ca 1500x 2000 px hat.
    Safari benutzt aber nur 1024p

    Ist das ein gängiger Standard? Wo wird das bestimmt?
    Wie kann man Auflösungen im Browser ändern? Wie greift das CSS zu?

  • http://www.whatismyscreenresolution.com/

    Hier wird die auflösung gezeigt.
    Mein gerät kann 1080p zeigt aber nur 320p

    Auch in der "Desktop ansicht"

    Warum wird keine volle Auflösung benutzt?
    Ich habe eine responsive Seite mit CSS Media Queries.

    Da arbeite ich nur mit Auflösungen.
    Wenn ich nun die Seite mit verschiedenen Geräten besuche, werden für smartphones die 640p regeln genommen.
    Ist das Standard dass Browser eine maximal Auflösung darstellen?
    Mittlerweile habe ich viewport meta tag kennen gelernt. Da kann man sowas forcieren.
    Habt ihr eine email von einem Developer den ich direkt anftagen kann

  • Vergiss diese Seite, die ist einfach unglaublich naiv umgesetzt.

    Code
    height = screen.height;
    width = screen.width;

    Stattdessen wäre das hier weit sinnvoller, wenn du wissen willst, wie viel Platz verfügbar ist:

    Code
    var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

    Schon sind die zahlen wesentlich höher.
    Und ja, Viewport-Metatag ist Pflicht bei der Umsetzung eines Responsive Designs.

    Ich weiß nicht, von wem du eine E-Mail-Adresse haben möchtest, aber mit solchen Anfragen schreibt man nicht irgendwelche Leute persönlich an, die Leute haben genug zu tun. Dafür gibt es Foren und Plattformen wie Stack Overflow.

  • Also, ein Beispiel:

    Ich habe 3 Anzeige Layouts/Regeln

    1) Alles bis width = 1024px -> Mobile Ansicht
    Media all (max-width: 1024px)

    2) Alles ab width = 1024px -> Tablet Ansicht
    Media all (min-width: 1024px)

    2) Alles ab width = 1280px -> Desktop Ansicht
    Media all (min-width: 1280px)

    Was ich zu Verfügung habe:
    - Smartphone (Android) mit width = 1080p und Firefox
    - Tablet (iOS) mit width = 1536px und Safari


    Beobachtung:
    - Smartphone:
    - Wählt die 1 Regel, obwohl ja width = 1080p sein müsste. Firefox benutzt aber anscheinend weniger -> Warum?

    - Tablet:
    - Wählt die 2 Regel, obwohl width > 1024px. Nach Recherche simuliert Safari 1024px. -> Warum?

    Welchen Hintergrund hat das ganze?
    Kann man mit Viewports also die "simulierte" Grenze erhöhen? (Noch nicht getestet)


    Vielleicht ist es jetzt etwas klarer


    Vielen Dank

    Grüße

  • Ich hab keinen metatag mit viewport im moment. Das ist ja das quriose.
    Die Auswahl ist ja eigentlich optimal seitens der Browser. Im Endeffekt wollte ich das ja so.
    Ich habe aber keine viewport einstellung gebraucht. Und ich weiss nicht ob es gang und gebe ist dass die apps das selber erkennen und einstellen. Anscheinend ja schon. Und mit dem ppi hat das bestimmt nichts zu tun. Andere meinten ja dass eine bestimmte Auflösung simuliert wird. Anders hätte die Auswahl nicht stattgefunden. Wenn ich mit meinem smartphone auf die seite gehe zeigts mir 360x 640 an obwohl es ja 1080p sein müssten. Im Quellcode sehe ich auch nichts von viewport.

    Deshalb müsste man mal zur Aufklärung einen Entwickler anfragen. Das ist ja nicht verboten oder?

  • Zitat von fromage2

    Ich hab keinen metatag mit viewport im moment.

    Dann solltest du das nachholen. Bittesehr, direkt zum Übernehmen:

    Code
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />

    Dieser Schritt gehört immer dazu, wenn man ein Responsive Design erstellt.

    Zitat von fromage2

    Wenn ich mit meinem smartphone auf die seite gehe zeigts mir 360x 640 an obwohl es ja 1080p sein müssten. Im Quellcode sehe ich auch nichts von viewport.

    Ich dachte, das hätten wir schon geklärt? Beitrag 4. Die Seite taugt nichts.

    Zitat von fromage2

    Deshalb müsste man mal zur Aufklärung einen Entwickler anfragen. Das ist ja nicht verboten oder?

    Ja, in einem Forum kannst du sowas ja fragen. Hier werden aber sicher nicht ungefragt E-Mail-Adressen weitergegeben. Davon abgesehen, dass dies ein Firefox-Forum und kein Webentwicklungs-Forum ist. Insofern weiß ich auch nicht, von wem genau du dir eine E-Mail-Adresse erhoffst. Firefox-Entwickler haben mit deiner Frage nichts zu tun.

  • Vielen dank fürs viewport.

    Aber du verstehst das Problem immer noch nicht.
    Es geht darum warum die Browser (dann eben ohne viewport) einfach nicht die volle mögliche Auflösung benutzen. Weil du das nicht aufklärst gehe ich davon aus dass das die Entwickler beantworten können.

    Aber egal ich finde schon den richtigen Ansprechpartner irgendwie. Ich sehe das Problem nicht Entwickler zu kontaktieren. Hatte bisher immer nette Gespräche.

    Trotzdem danke und gruß

  • Ich verstehe das Problem sogar sehr gut, ich hab dir das auch in Beitrag #6 erklärt. Ohne Viewport Scaling wären die meisten Webseiten auf dem Smartphone viel zu klein. Der Viewport-Metatag gibt einem für die Erstellung eines Responsive Designs aber die Kontrolle darüber und muss dafür genutzt werden.

    Naja, was weiß ich schon. Ich mach sowas ja nur 40 Stunden die Woche.

  • Ich hab aber kein viewport eingestellt und die webseite ist nicht zu klein.
    Safari hat einen viewport von 960px. Was sagst du dazu? Gibt es einen Grund?
    Ich will nur wissen warum die Browser einen Viewport haben. Als Entwickler muss man sich doch nur dann an die Browser Viewports einstellen und nicht an die Smartphone Auflösungen, so wäre der logische Schluss.
    Warum soll man mehrere regeln erstellen wenn man sich eh auf eine Zahl fokussieren kann?

    Ich hab eine css regel die vom smartphone übernommen wird. Die regel sollte aber nie zutreffen weil das smartphone eine zu hohe Auflösung hat. Sie kommt aber eben zur Kraft weil der Browser anscheinend nicht die volle Auflösung benutzt. Zum vierten Mal: Warum tun die "Browser" das? Kannst du das als nicht-"Browser"-Entwickler eigentlich beantworten? :)

  • Ich geb's auf. Du kannst dein Responsive Design entweder so erstellen, wie man es richtig macht, oder auf deine Art, musst dann aber eben auch mit den Nebenwirkungen leben. Ich habe dir bereits mehrfach geschrieben, dass es ohne das Viewport-Metatag ein Viewport Scaling gibt, das hat gute Gründe. Das kann sich in unterschiedlichen Browsern durchaus unterschiedlich verhalten. Das Viewport-Metatag wurde nicht grundlos eingeführt. Ich kann mir beim besten Willen nicht vorstellen, wie du in einem Responsive Design darauf verzichten kannst. Ich mach das wie gesagt beruflich und ich hab es bislang immer gebraucht und in jedem halbwegs vernünftigen Tutorial wird das als absolutes Grundlagen-Wissen über Responsive Designs vermittelt.

    Die Fragestellung, wieso Browser einen Viewport haben, ergibt übrigens keinen Sinn. Viewport ist nur Englisch für den sichtbaren Bereich der Webseite. Dass es einen sichtbaren Bereich gibt, versteht sich ja von selbst, alles andere wäre schlecht, das würde bedeuten, dass du nichts siehst.

  • Hier
    http://html5-mobile.de/blog/meta-view…mobile-anpassen

    weiter unten gibt es einen Beispiel mit und ohne viewport.
    Ich habe kein Viewport eingestellt. Und bei mir werden die CSS regeln genommen. Und warum?
    Es gibt immer einen Viewport. Wenn man das anscheinend nicht spezifiziert, werden die Viewports der Browser auf den Jeweiligen Geräten genommen.
    Beim Safari wären das 980px auf dem iPad.
    Und daher greifen auch die CSS Media Queries.

    (selbst)geklärt.

  • Zitat von fromage2

    Und bei mir werden die CSS regeln genommen. Und warum?

    Gegenfrage: wieso nicht? Klar werden die CSS-Regeln angewendet. Der Punkt ist, dass deine Breiten-Breakpoints unter Umständen nicht erreicht werden. Das hast du aber wie gesagt in der Hand.

    Zitat von fromage2

    Es gibt immer einen Viewport.

    Selbstverständlich. Das ist genau das, was ich im Beitrag davor geschrieben habe.

    Zitat von fromage2

    Wenn man das anscheinend nicht spezifiziert, werden die Viewports der Browser auf den Jeweiligen Geräten genommen.

    Wenn du das Metatag verwendest, findet - wie mehr als nur einmal erklärt - ein Viewport Scaling statt. Sinn des Metatags ist es, dass du verlässliche Annahmen für dein Design treffen kannst.

    Zitat von fromage2

    (selbst)geklärt.

    Selbst geklärt? Nicht wirklich. Ich erkläre dir seit mehreren Beiträgen, wie es funktioniert. Du verstehst halt nicht, was ich die ganze Zeit schreibe.

  • Ich bin ja noch lehrling. Es war unklar für mich.

    Es gibt also doch standart viewports wie ich vermutet habe. Man kann trotzdem die entwickler anfragen warum ausgerechnet diese Breite (zb. 980px) ausgewählt wurde.
    Wie wird das in zukunft aussehen mit 4k smartphone displays und hohen ppis?
    Es sind fragen die mich interessieren. Nun gut. Danke für die mühen. Ich habs erst im nachhinein verstanden. Vlt hilft dieser thread anderen. Habe noch keine dies bzgl gefunden.