Mobile Ansicht

Read-Only-Modus

Das 01-Supportforum befindet sich im Read-Only-Modus. Es ist nicht mehr möglich sich zu registrieren, neue Themen zu erstellen oder auf bestehende Themen zu antworten.

Alle Inhalte stehen bis auf absehbare Zeit jedoch weiterhin lesend zur Verfügung.


Bei Fehlern oder Problemen mit PHP-Scripten von 01-Scripts.de erstellen Sie gerne einen Issue-Eintrag auf Github oder nehmen Sie per E-Mail Kontakt auf.

    Hey,


    ich bin derzeit dabei meine Seite umzugestalten, damit sie endlich auch Mobil leichter zu bedienen ist. Für die Startseite nutze ich ja schon seit einigen Jahren das Artikelsystem, welches unter Firefox auch gut läuft, von der Ansicht her. Bei Chrome (Desktop) sieht es schon wieder leicht anders aus, was aber noch im Rahmen liegt.


    Nun habe ich mir mal den Firefox-, Chrome- und Samsung-Browser (Mobil) auf dem Handy installiert, was bei Chrome und Samsung nicht mehr schön aussieht.


    Firefox:
    [Blockierte Grafik: http://fs5.directupload.net/images/160925/aqgc39sk.png]


    Chrome:
    [Blockierte Grafik: http://fs5.directupload.net/images/160925/rpve5szn.png]


    Samsung:
    [Blockierte Grafik: http://fs5.directupload.net/images/160925/8dl5e2se.png]


    Gibt es eine Möglichkeit, dies zu beheben?

    Hallo,


    ich kann diesbezüglich leider im Detail nicht weiterhelfen.
    Die Darstellung im Browser / Mobil wird ausschließlich durch den CSS-Code bestimmt. Dieser muss ggf. angepasst werden.


    Ich kann nur empfehlen ein CSS-Framework (z.B. Bootstrap) zu nutzen um sowohl auf dem Desktop als auch auf mobilen Browsern eine schöne Darstellung zu erhalten.


    MfG,
    Michael

    Hallo.
    Am besten ist das du dir Bootstrap runterlädst (Framework). Ich benutze es auch und es klappt (ohne das ich hier übertreibe) richtig toll mit der Darstellung.
    Als kleinen Helfer bei der Ansicht kann ich dir raten das du dir RWD Bookmarklet holst und es dir in deine Favoritenleisten des jeweiligen Browsers ziehst. RWD Bookmarklet simuliert dir dabei die möglichen Ansichten des jeweiligen Viewports wo deine Seiten dann ausgegeben werden.


    LG Sindy

    Ich hatte / hab auch dieses Problem(chen). Nur das ich alles perfekt für Chrome hatte, und nur noch für
    Firefox anpassungen machen musste. Auf dem Desktop hab ich sämtliche Browser probiert und alles lief
    fast gleich. Ausser Sonderwonder Firefox... Naja. Hab dafür dann Kompromisse eingehen müssen und
    auch einiges umprogrammiert.


    Für die Mobilen Seiten hab ich mit CSS rumgespielt und bisher noch nicht so richtig die Ultimative Lösung
    gefunden. Dieses Bootstrap klingt da schon recht vielversprechend.


    Jetzt muss ich das noch irgendwie einbinden. Muss ich mich noch durchgooglen. Danke für den Tip...!


    RWD Bookmarklet schneidet bei mir nur die Seite kleiner. Die Handyumleitung funktioniert nicht.
    Ausserdem wird die seite nicht verkleinert angezeigt. Irgendwie nicht brauchbar...
    Ich hab da lange mal nach nem "Emulator" für Browser gesucht, und bin auf BrowserStack gestossen.
    Bisher das beste was ich fand. Allerdings ist das ganze recht teuer...
    Aber für ne halbe Stunde pro E-Mail Adresse kann man kostenlos testen. www.browserstack.com/


    So konnte ich auch eingiges für Apple anpassen...
    Gruss
    atallen

    Das wäre cool, wenn du eine Möglichkeit finden würdest.


    Weiterleiten geht mit:
    <link rel="alternate" media="only screen and (max-width: 360px)" href="http://m.meine-domain.de" >


    Und zum verkleinern (Zoom):
    <meta name="viewport" content="width=device-width, initial-scale=0.6, user-scalable=no">

    dhh


    mache dir nicht so viel Arbeit. Weiterleiten ist definitiv nicht die richtige Lösung.
    Wie schon von mir erwähnt. Nutze Bootstrap, dort sind die media-queries bereits für die gängigsten Viewports vordefiniert. Dort schreibst du dann deine verschieden Divcontainer oder deine Div-Klassen rein.


    Bsp:

    Code
    1. @media (min-width: 1200px) {
    2. .deineclasses {
    3. bla blabla
    4. }
    5. #deinedivcontainer {
    6. bla blabla
    7. }
    8. }

    Hmm, irgendwie verstehe ich das ganze mit Bootstrap nicht wirklich.


    Ich habe mal ein bisschen rumprobiert und die leichteste Lösung für mich wäre, Bilder in die Mitte setzen und der Text darunter (für die mobile Ansicht).


    [Blockierte Grafik: http://fs5.directupload.net/images/161024/e2lbau6l.png]


    Auf der Hauptseite nutze ich "Bilder Links - Text daneben".


    Für die Mobile-Ansicht, wäre es gut, wenn dies ignoriert wird und Bilder in der Mitte landen und der Text darunter. Könnte mir einer sagen, wie ich das umsetzen kann?
    Ich nutze für die Mobile Ansicht einen zweiten Ordner mit allen Dateien, weil es mit meinem CMS keine andere Möglichkeit gibt.


    Wäre super, wenn mit einer weiterhelfen könnt.

    dhh schrieb:

    Michael


    Hey, vielleicht könntest du mir sagen, wie ich es hinbekomme, das alle News unter dem Bild erscheinen. Da die Mobile Ansicht einen extra Ordner hat, müsste es ja da nur eingestellt werden.
    Wäre dir sehr dankbar.


    Hallo,


    ich habe mir das mal kurz angeschaut.
    Das was du machen willst geht aber nicht so einfach. Es mag zwar sein, dass die Dateien für die mobile Ansicht in einem extra Verzeichnis sind. Aber der Artikel kommt ja in beiden Fällen aus der gleichen Datenbank. Und was die Ausrichtung von Bild und Text angeht wird diese ja fest im Artikel selbst definiert.
    Daher ist das leider nicht so einfach hier für die mobile Version dann die von dir gewünschte Änderung mal eben durchzuführen.


    MfG,
    Michael

    Also ich habe mal ein bisschen probiert und gegoogelt. Im Grunde liegt das Problem dadrin, das Chrome die Bilder nicht auf 150*150 lässt, sondern kleiner macht. Hast du ne Idee, wie man das ändern kann?


    Sorry fürs nerven. Aber Chrome ist halt der beliebteste Browser auf Handys usw.