Seitendarstellung f. Smartphone

Alles was die Programmierung mit PHP betrifft

Moderator: wegus

Henry
Beiträge: 30
Registriert: 14.12.2011, 16:16

Seitendarstellung f. Smartphone

Beitragvon Henry » 07.11.2012, 12:58

Hallo alle miteinander,

mein Problem ist die Verkleinerung des Browserfensters.
Genauer:
Es sollen 3 divs auf dem Bildschirm nebeneinander angeordnet werden, also 3 Informationsblöcke/Spalten.
Nun soll es im Idealfall auch möglich sein, das ganze auf einem kleinen Display anzusehen (Smartphone).
Dazu soll die mittlere Spalte unter der 1. erscheinen, da ja das Display des Smartphones nicht groß genug ist.
Die 3. Spalte aber soll gar nicht mehr angezeigt werden.

Wie könnte man da rangehen?
Gibt es eine Möglichkeit, die Größe des aktuellen Browserfensters abzufragen?
Hat jemand eine Idee?

Henry

ebaumann
Beiträge: 284
Registriert: 22.01.2009, 08:53
Wohnort: Würzburg
Kontaktdaten:

Re: Seitendarstellung f. Smartphone

Beitragvon ebaumann » 08.11.2012, 07:44

Das geht mit CSS, das erstaunlich wenige Website-Designer beherrschen. Ich kümmere mich nicht um das Gerät, auf dem HTML dargestellt wird, sondern um die (Browser-) Fensterbreite, die zu lesendem Text zur Verfügung steht. Mein Site wird so auch auf Tablets und Smart Phones adäquat dargestellt. Die Idee: Wird eine bestimmte Seitenbreite unterschritten, können DIVs, identifiziert durch IDs ("content" etc.) in der Größe verändert oder ausgeblendet werden (display: none). Beispiel, falls das Fenster nicht mehr als 50em darstellen kann:

Code: Alles auswählen

@media screen and (max-width: 50em) {
    #content {
        max-width: 30em;
    }
    #sectionnav {
        display: none;
    }
}


Nur bei Bildgalerien nutze ich zusätzlich JavaScript, damit auch sichergestellt ist, dass große Bilder in der Höhe vollständig angezeigt werden ohne Seitenverhältnis-Änderung inklusive der Navigation und Infotexten (und damit diese bei Touch Screens per "Wisch" geblättert werden können). Das JavaScript ist optional, ohne könnten kleine Displays Bilder eventuell nur durch vertikales Scrollen nach und nach anzeigen.

Henry
Beiträge: 30
Registriert: 14.12.2011, 16:16

Re: Seitendarstellung f. Smartphone

Beitragvon Henry » 09.11.2012, 15:36

Media Queries also. Damit habe ich mich noch nicht beschäftigt.
Mal sehen, vielleicht finde ich irgendwo ein Beispiel.
Wahrscheinlich kann man die in den Header oder wahlweise in die css-Datei einbinden.
Damit habe ich erst mal die Richtung zum Weitermachen.
Danke für die schnelle Antwort.

Gruß,
Henry

ebaumann
Beiträge: 284
Registriert: 22.01.2009, 08:53
Wohnort: Würzburg
Kontaktdaten:

Re: Seitendarstellung f. Smartphone

Beitragvon ebaumann » 09.11.2012, 19:36

Henry hat geschrieben:Wahrscheinlich kann man die in den Header oder wahlweise in die css-Datei einbinden.

Ich bette dies in CSS-Dateien ein. Das Beispiel oben ist weitgehend selbsterklärend: Kann das Browserfenster ohne horizontale Scrollbar nicht mehr als 50 em in einer Zeile (horizontal) darstellen, greift die Regel, z.B. wird das Element mit der ID "content" nicht breiter als 30em. Per Default (ohne Query) könnte es z.B. 40 em breit sein.

So lassen sich mehrere Queries einbauen, sinnvoll ist ein Standard für "typische" Destop-PC-Bildschirme (solange noch häufiger als Tablets), eine Query für "typische" Tablets und eine für Smart Phones. Da die Query im Beispiel geräteunabhängig ist, wird auch auf großen Bildschirmen der Inhalt bestmöglich gerendert, falls das Browserfenster z.B. schmaler als üblich ist.

Kighlander
Beiträge: 2
Registriert: 11.10.2015, 09:38

Re: Seitendarstellung f. Smartphone

Beitragvon Kighlander » 11.10.2015, 09:57

Moin...

Ich kenne das mit den Darstellungen auf kleineren Geräten sehr gut.

Von daher nutze ich in meinen Projekten gerne das BOOTSTRAP-Framework.

Dank des integrierten Grid-Systems brauche ich mich nicht mehr selber um die Darstellung auf mobilen Geräten kümmern.

Das BOOTSTRAP Projekt gibt es sogar mit einer hervorragenden Dokumentation IN DEUTSCH (http://holdirbootstrap.de/)

Sieh Dir das mal an, dann sollte das mit den mobilen Endgeräten wunderbar passen ;)

Gruß,

Kigh

Benutzeravatar
wegus
Beiträge: 458
Registriert: 26.09.2006, 09:07

Re: Seitendarstellung f. Smartphone

Beitragvon wegus » 11.10.2015, 10:40

Ja Bootstrap/jquery sind hier eine sehr gute Lösung!

Es geht ja nicht nur um Mediaqueriies, sondern auch um Browserbesonderheiten. Zudem erhält man mit Bootstrap und jquery dann auch ein solides Toolset für alle Standardprobleme und das responsiv und Systemüvergreifend!
Wenn etwas zu einfach klingt um wahr zu sein, dann ist es oft auch nicht wahr!

Benutzeravatar
BohnenJoe
Beiträge: 10
Registriert: 07.10.2015, 15:50

Re: Seitendarstellung f. Smartphone

Beitragvon BohnenJoe » 03.11.2015, 13:11

wegus hat geschrieben:Ja Bootstrap/jquery sind hier eine sehr gute Lösung!

Es geht ja nicht nur um Mediaqueriies, sondern auch um Browserbesonderheiten. Zudem erhält man mit Bootstrap und jquery dann auch ein solides Toolset für alle Standardprobleme und das responsiv und Systemüvergreifend!


so sehe ich das auch :wink:


Zurück zu „NetBeans PHP - Programmierung“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast