mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 21.07.2017 16:48 Benutzername: Passwort: Auto-Login

Thema: CSS: Handy sicher erkennen (media query) vom 04.01.2017


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS: Handy sicher erkennen (media query)
Autor Nachricht
qualidat
Threadersteller

Dabei seit: 14.09.2006
Ort: Berlin
Alter: 56
Geschlecht: Männlich
Verfasst Mi 04.01.2017 19:34
Titel

CSS: Handy sicher erkennen (media query)

Antworten mit Zitat Zum Seitenanfang

Ich habe gerade mal ein wenig mit CSS herumgespielt, speziell zum Thema media query. Soweit ich das verstanden habe, melden sich dummerweise auch Handies (iPhone, Galaxy) mit "screen" statt "handheld".

Eine Unterscheidung nur anhand der Auflösung (das waren die einzigen Beispiele, die ich finden konnte) ist m.E. nicht so wahnsinnig sinnvoll, da moderne Mobilgeräte ebenfalls eine sehr hohe Auflösung haben können ... aber trotzdem nur einen rel. kleinen Bildschirm. Blöderweise habe ich dann nur eine extrem verkleinerte "Normal-Webseite".

Wie kann ich sicher die Displaygröße (nicht -Auflösung) erkennen? Danke für Tips.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 45
Geschlecht: Männlich
Verfasst Do 05.01.2017 10:59
Titel

Antworten mit Zitat Zum Seitenanfang

Hast du auch den Viewport im Head der Seite definiert?

Z. B. so:
Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">


Wenn das nicht definiert wird, setzen viele Mobilgeräte einfach einen festen Standard-Wert für die Breite des Bildschirmes, der nicht viel mit den tatsächlichen Maßen zu tun haben muss.

Bei Hochauflösenden Displays (wie Retina & Co.) unterscheiden moderne Browser auch noch mal zwischen CSS-Pixeln und tatsächlich vorhandenen Pixeln. Ein CSS-Pixel wird dann z. B. mit 2x2 Pixeln dargestellt.

Hier zwei Artikel die es beschreiben:
http://html5-mobile.de/blog/meta-viewport-fuer-mobile-anpassen
http://html5-mobile.de/blog/retina-display-pixel-iphone-ipad-macbook
  View user's profile Private Nachricht senden
Anzeige
Anzeige
hadouken

Dabei seit: 07.11.2015
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 05.01.2017 16:45
Titel

Antworten mit Zitat Zum Seitenanfang

Es ist nicht möglich per CSS festzustellen ob es sich um ein Smartphone, Tablet, Desktop-PC, Notebook ohne Touchscreen, Notebook mit Touchscreen, etc. handelt.
  View user's profile Private Nachricht senden
qualidat
Threadersteller

Dabei seit: 14.09.2006
Ort: Berlin
Alter: 56
Geschlecht: Männlich
Verfasst So 08.01.2017 12:01
Titel

Antworten mit Zitat Zum Seitenanfang

top hat geschrieben:
Hast du auch den Viewport im Head der Seite definiert?

Z. B. so:
Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">




Danke, das hat zumindest in den meisten Testfällen geholfen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
qualidat
Threadersteller

Dabei seit: 14.09.2006
Ort: Berlin
Alter: 56
Geschlecht: Männlich
Verfasst So 08.01.2017 12:03
Titel

Antworten mit Zitat Zum Seitenanfang

hadouken hat geschrieben:
Es ist nicht möglich per CSS festzustellen ob es sich um ein Smartphone, Tablet, Desktop-PC, Notebook ohne Touchscreen, Notebook mit Touchscreen, etc. handelt.


Gibts überhaupt einen verlässlichen Weg (bewusstes Browser-Faking z.B. per Plugin mal ausgenommen)?
Per Javascript?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
hadouken

Dabei seit: 07.11.2015
Ort: -
Alter: -
Geschlecht: -
Verfasst So 08.01.2017 20:54
Titel

Antworten mit Zitat Zum Seitenanfang

Über ein Lookuptable vielleicht, nachdem man das Gerät "erraten" hat. Aber auf die EDID hat man keinen Zugriff.
  View user's profile Private Nachricht senden
 
Ähnliche Themen CSS Media Queries
Probleme mit css-media:print
? mysql-query
mysql-Query gesucht
Datenmenge pro Query begrenzt?
MySQL - Reg. Expressions im Query
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.