Media Queries: Mit welchem Befehl lassen sich Tablets von Desktops unterscheiden?

[MythTakes]

Hallo Html Forum,

um z.B. mobile Endgeräte wie das iPad von Desktoprechner mit geringer Auflösung in der CSS-Datei zu ermitteln, habe ich folgenden Code verwendet:

@media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1) {}

Klappt wunderbar auf dem iPad (1-4). Aber wie gesagt, auf dem iPad.

Um mobile Endgeräte von Desktoprechnern mit ähnlichen Auflösungen zu unterscheiden und entsprechende CSS-Anweisungen für diese zu liefern, brauche ich doch nur den Befehl
"max-device-width" anstatt von "max-width" in den Media-Queries zu schreiben oder?

Ich möchte Tablets/Smartphones von Desktoprechner trennen, weil ich einen Parallax-Effekt verwende, der aber auf mobilen Geräten keinen großen Sinn ergibt.

Vielen Dank für eure Ratschläge schon mal.

 

[Tronjer]

Durch abfragen des User Agent.

 

[MythTakes]

Würdest du diese Methode auch noch empfehlen in Zeiten von Media Queries?

 

[harryman]

Hi,
also mit UserAgents... da habe ich so meine Bedenken, ob das noch zeitgemäß ist. Habe ich zwar selbst in meinem Blog im Jahre 2011 noch propagiert, würde ich aber jetzt nicht mehr machen.

@media only screen and (max-width: 768px)

würde aus meiner Sicht zur Unterscheidung ausreichen. Mit pixel-ratio etc. kann man zwar für die hochauflösenden Displays noch etwas Besseres anbieten... Ich würde mich aber eher auf die breite Masse konzentrieren.

 

[Tronjer]

Ich dachte, es ginge hierum:

Ich möchte Tablets/Smartphones von Desktoprechner trennen, weil ich einen Parallax-Effekt verwende, der aber auf mobilen Geräten keinen großen Sinn ergibt.