| 

.NET C# Java Javascript Exception

1
Hallo

Problem: Responsive Website.
Ich muss heraus bekommen wie viel Zoll der Bildschirm hat. 7 Zoll oder 10 Zoll.

Klar, kann ich mit Media Queries arbeiten, über Pixel & PPI, erscheint mir jedoch nicht so wirklich praktikabel. Da müsste ich ja dutzende erstellen.
Die Maße unterscheiden sich ja immer etwas und auch die PPI... wie würdet ihr das lösen, nur die 7 Zoll Geräte anzusprechen (ohne dass ein 5 Zoll oder 10 Zoll angesprochen wird, egal welche Pixelmaße das Gerät hat).

Hab mir mal ein paar Geräte rausgesucht:
Nexus 5 Handy: 1920 x 1080 (445 ppi)
iPad mini Retina: 2048 x 1536 (326 ppi)
Nexus 7 (2013): 1920 x 1200 (323 ppi)
iPad Air: 2048 x 1536 (264 ppi)
Asus MemoPad 10 zoll: 1920 x 1200 (226 ppi)
Nexus 7 (2012): 1280 x 800 (216 ppi)
iPad mini: 1024 x 768 (163 ppi)
iPad 2: 1024 x 768 (132 ppi)

Gibt es da nicht ein Script das mir zuverlässig ausgibt wie viel Zoll das Gerät misst?

2. Problem: Habe zB ein Nexus 7 (2013)... $("body").width(); etc zeigt mir dann aber eine Auflösung von 960x440 an??? Media Queries sprechen bei der "echten" Auflösung auch nicht an.
Gruss
Meone
News:
13.11.2013
meone 100 1 6
meone 100 1 6
3 Antworten
1
Du hast wahrscheinlich bessere Chancen, das serverseitig über Device-Datenbanken herauszubekommen:
http://wurfl.sourceforge.net/help_doc.php#display
http://51degrees.mobi/Products/DeviceData/PropertyDictionary.aspx
Und dann einfach in das generierte HTML aufnehmen (Attribut für Auswertung über ein Script oder CSS class).

HIH,
AJ.NET
13.11.2013
1175286827 11 2
0
Zu Deinem 2. Problem:

http://stackoverflow.com/questions/12257279/nexus-7-screen-width-returns-800-but-media-query-max-width-720px-still-applies
http://stackoverflow.com/questions/12061127/css-media-queries-on-nexus-7-display-resolution-not-working-in-code

(Beziehen sich wohl auf das ältere Nexus 7, scheint aber das selbe Problem zu sein).

Zusammenfassung in meinen Worten: die "falsche" Angabe der Auflösung ist Absicht, damit die Geräte nicht mit großen Desktop-Bildschirmen verwechselt werden (von Seiten, die versuchen, sich an die Größe anzupassen, aber nicht die dpi-Angaben auswerten). Auch wenn die Pixel-Dimensionen gleich sind, ist es normalerweise keine gute Idee, auf einem 7-Zoll-Bildschirm ein Design anzuzeigen, das für einen 24-Zoller gedacht ist.
Mit den auf beiden Seiten angegebenen Meta-Tags kann man das Verhalten anscheinend abschalten.

Das ist auch kein neues Phänomen. Hab ich vor Jahren schon mal auf einem Windows-Mobile-Handy gesehen.

Zu Deinem 1. Problem: keine Idee, nur die neugierige Frage: was ist der Use Case dafür???
13.11.2013
Matthias Hlawatsch 13,2k 4 9
-1
Erstelle deine Seite nicht nach den verschiedenen Endgeräten sondern nach dem Inhalt.

Angenommen du hast ein 2 Spaltiges Layout mit einer gesamtbreite von 1200px wie z. B. Inhalt / Sidebar. Du gibst die Spaltenbreiten mit % an, also 66% & 34%. Dann verkleinerst du den Browser bis der Inhalt bescheiden aussieht, weil z.B die Sidebar zu schmal wird. Ab diesem Punkt, sagen wir mal 900px setzt du dann beide Spalten auf 100% das der Inhalt untereinander dargestellt wird.

Ist dir der Inhalt der Sidebar dann zu breit, setzt du ihn Zentriert und auf 80%. Dann verkleinerst du den Browser weiter und ab 500px setzt du die Sidebar wieder auf 100%.

Wenn du nicht auf jeder Seite ein anderes Layout verwendest, dann ist das nicht viel Aufwand. Normalerweise hat man ja ein Hauptlayout wie oben 66% / 34%, also Inhalt / Sidebar, ein Weites Layout 100% und ein 3 Spaltiges 33% / 33% / 33% um auf der Startseite z. B. Servicepunkte nebeneinander darzustellen.

Was dann noch anfällt sind Header & Footer. Insgesamt hast du dann vielleicht 30 Media Queries. Die kannst du dir speichern und immer wieder verwenden.

---

Versteife dich auch nicht auf die Prozentangaben, sondern richte dich nach der Optik des Inhalts / Optik der Webseite. Wenn du den Browser verkleinerst und der Inhalt erst bei 800px bescheiden aussieht dann setze da den Breakpoint oder gib der sidebar mehr Platz 60% / 40%.

So stellst du sicher das die Seite immer gut aussieht bei einer bestimmten Breite eines Endgerätes. Dann spielt es keine Rolle ob du die 500px Version auf einem Tablet oder einem kleinen Monitor anschaust, du weist das es gut aussieht.

Deswegen nutze ich auch keine Framworks mehr sondern hab mein eigenes Grid das ich immer an die Kundenbedürfnisse anpasse.

Gruß Christian
16.08.2014
chris1407 1 2
Hallo Christian

Das war nicht die Antwort auf meine Frage :-)

Ich erstelle täglich Webseiten, Media Queries sind mir ein Begriff und werden immer eingesetzt, dein Weg befolge ich schon lange. Aber es gibt aber besondere Projekte wo dies einfach so nicht möglich ist. Besonders da sich die modernen Geräte anders ausgeben, also Ihre Auflösung faken, somit wird nicht das Media Querie geladen was ich eigentlich möchte.
meone 18.08.2014

Stelle deine Css-Frage jetzt!