Contao Konferenz 2019 in Duisburg - Call for Papers
Ergebnis 1 bis 7 von 7

Thema: Darstellung der HP soll sich nur an Bildschirmauflösung orientieren

  1. #1
    Contao-Nutzer Avatar von grashalm
    Registriert seit
    17.06.2010.
    Ort
    Mainz
    Beiträge
    126

    Standard 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
    wie gut, dass es contao gibt!

  2. #2
    Contao-Nutzer Avatar von hjo
    Registriert seit
    08.01.2013.
    Ort
    Wuppertal
    Beiträge
    21

    Standard

    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

  3. #3
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    5.461
    Partner-ID
    107
    User beschenken
    Wunschliste

    Standard

    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.”
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Für Contao abstimmen: https://bitnami.com/product/contao/widget
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://planepix.gitbooks.io/erfahru...tao-4/content/
    Contao 4 Hoster: https://github.com/contao/contao-manager/wiki

    It's OpenSource. So invest with coding, testing and time.

  4. #4
    Contao-Fan Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    874
    Partner-ID
    6122

    Standard

    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 ...
    Carpe diem ...

  5. #5
    Contao-Fan Avatar von fusch
    Registriert seit
    25.03.2012.
    Ort
    München
    Beiträge
    352

    Standard

    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
    Mitglied des Contao-Stammtisch München
    Aktuelle Termine erfährst Du immer unter www.contao-bayern.de
    Komm' doch mal vorbei!

  6. #6
    Contao-Fan Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    874
    Partner-ID
    6122

    Standard

    Zitat Zitat von fusch Beitrag anzeigen
    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
    Carpe diem ...

  7. #7
    Contao-Nutzer Avatar von grashalm
    Registriert seit
    17.06.2010.
    Ort
    Mainz
    Beiträge
    126

    Standard

    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
    wie gut, dass es contao gibt!

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •