Darstellung der HP soll sich nur an Bildschirmauflösung orientieren

liebe community,

habe für meine seite www.die-schreibmaus.de 2 layouts und 2 stylesheets angelegt: jeweils eines für die desktop-version (optimiert für monitore mit 1920 px), und eines für die mobile version. bei den stylesheets habe ich für die desktop-version den medientyp "screen" ausgewählt, für die mobile version den medientyp "handheld". das stylesheet für den desktop habe ich dann beim layout für den desktop-monitor eingebunden und das stylesheet für die mobile version im layout für mobile endgeräte eingebunden.
die jeweilige darstellung erfolgt auf den jeweiligen endgeräten entsprechend richtig, das heißt: auf meinem desktop-pc wird die desktop-variante ausgegeben und auf einem smartphone wird die mobile version angezeigt. so weit, so gut.

kann ich aber contao auch so einstellen, dass contao sich nicht am endgerät orientiert, sondern nur an der jeweiligen bildschirmauflösung??? wenn ich zum beispiel bei kleineren monitoren einen kleineren viewport habe, wäre unter umständen die darstellung wie analog auf einem smartphone besser... oder umgekehrt: wenn ich ein hochauflösendes tablet habe, wäre vielleicht die darstellung wie analog auf einem desktop-monitor günstiger...

weiß jemand, ob und wie ich das realisieren kann, oder mache ich dabei einen denkfehler?

vielen dank für eure hilfe,

grashalm

Hallo grashalm,

ich persönlich benutze nur die media-query mit min-width oder max-width. Mir ist nur die Größe des Screen wichtig. Ob es ein PC oder ein Smartphone oder ein Tablet ist, ist mir egal. Hinzu kommt das neue Geräte eventuell nicht in der Datenbank sind.

Ich fange mit diesen Beiden an.
@media handheld, screen and (max-width: 991px) {}
@media handheld, screen and (min-width: 992px) {}

Eventuell erweitere ich diese um weiter breakpoints.

Ich hoffe ich konnte dir helfen

MfG
Hans-Jürgen

Vielleicht noch interessant:
https://blog.kulturbanause.de/2011/0...co-optimieren/

Zitat:
Zur Info: Smartphones und Tablet-PCs melden sich als screen bei einer Website an. Der Media-Type handheld ist für diese Geräte also nicht geeignet.”

Ich orientiere mich für die Media-Queries an den entsprechenden Grid Frameworks - z.B.:

https://github.com/ErdmannFreunde/eu...s/euf_grid.css
https://getbootstrap.com/docs/4.0/layout/grid/

Ein separates Mobil-Layout in Contao wird dann im Grunde nicht benötigt ...

Du hattest ja nach der Auflösung, nicht nach der Größe gefragt.
Da musst Du in der Media Query die Resolution abfragen:

https://developer.mozilla.org/en-US/...dia/resolution

Gruß
Hella

Zitat:

---

Zitat von fusch

Du hattest ja nach der Auflösung, nicht nach der Größe gefragt.
Da musst Du in der Media Query die Resolution abfragen:

https://developer.mozilla.org/en-US/...dia/resolution

Gruß
Hella

---

Stimmt - evtl. hierzu noch:
https://blog.kulturbanause.de/2013/0...media-queries/
http://screensiz.es/

https://css-tricks.com/snippets/css/...ndard-devices/
https://css-tricks.com/snippets/css/...y-media-query/

Wobei ich in den meisten Fällen auf derartig spezifische Angaben verzichten würde. Imho wäre dies schwerpunktmäßig nur für die Bildausgabe relevant -
Und dazu bietet Contao ja die Theme/Bildgrößen Funktionalität: https://rocksolidthemes.com/de/conta...picture-contao

liebe community,

ich war eine woche nicht im lande, deswegen jetzt erst meine antwort, sorry.
vielen dank jedenfalls für die vielen guten tipps und hinweise! ich werde mal
schauen und eure links nach und nach durchforsten. sollte ich dann noch fragen
haben, melde ich mich nochmal. danke für eure unterstützung!

grashalm