Neues Template für Smartphones anpassen

[dieter99]

Hallo,
ich möchte ein neues Template basteln und dabei folgende Unterscheidung treffen:

Code: Alles auswählen

[IF Smartphone-User]
<div>Button 1</div>
[ELSEIF Desktop-User]
<div>Button 2</div>

Wie muss der Code richtig lauten um mein Ziel zu erreichen?

[Lehrling]

Wenn dein Style auf dem Standard-Style prosilver basiert, musst du da nichts anpassen, denn der Style ist repsonsiv und switcht automatisch auf das responsive Layout, wenn man mit einem Handy aufs Forum zugreift. Änderungen an diesem Layout kannst du im responsive.css machen.

[dieter99]

Ich erstelle zum bestehenden Template eine zusätzliche neue Seite, und möchte diese neue Seite in Abhängigkeit zur Auflösung gestalten. Daher benötige ich sinngemäß folgenden Code:

Code: Alles auswählen

[IF Smartphone-User]
<div>Button 1</div>
[ELSEIF Desktop-User]
<div>Button 2</div>

[Crizzo]

Hi,

nein, ich denke nicht das du das brauchst.

Beschreib mal den Inhalt, den danach entscheidet sich die Umsetzung. Der wird ja für gewöhnlich nicht geändert. Du musst nur per CSS die Darstellung bei unterschiedlichen Auflösungen manipulieren. Einfach mal in die respsonsive.css schauen.

phpBB nutzen z.B. sowas wie .responsive-hide und .responsive-show

Grüße

[dieter99]

Du musst nur per CSS die Darstellung bei unterschiedlichen Auflösungen manipulieren.

Verstehe ich das jetzt richtig:

Es gibt CSS-Klassen für die mobile Ansicht und CSS-Klassen für den Desktop-PC. Doch wo sitzt die Intellegenz die darüber entscheidet, wann welche CSS Klasse aktiviert werden soll?

Muss mein Code wie folgt aussehen?

Code: Alles auswählen

    <div class="KlasseFuerSmartphones">Ich begrüße alle Smartphone User</div>
    <div class="KlasseFuerDesktopUser">Ich begrüße alle Desktop User</div>

Oder ist sowas gar nicht möglich? Sprich: einen TEXT in Abhängigkeit zur Auflösung. Denn genau das brauche ich.

[Lehrling]

probier mal das aus:
du fügst in das common.css Folgendes ein und passt es deinen Wünschen an:

Code: Alles auswählen

.smartphone { background-color: deine Wahl; display:none;
      }
	  
.desktop { background-color: deine Wahl; 
      }	  

Auf deiner Template-Seite muss der Code dann so aussehen:

Code: Alles auswählen

<div class="smartphone responsive-show">Ich begrüße alle Smartphone User</div>
<div class="desktop responsive-hide">Ich begrüße alle Desktop User</div>

Danach leerst du den Cache im Administrationsbereich.

[tas2580]

Es gibt CSS-Klassen für die mobile Ansicht und CSS-Klassen für den Desktop-PC. Doch wo sitzt die Intellegenz die darüber entscheidet, wann welche CSS Klasse aktiviert werden soll?

Das ist simples CSS und nennt sich Media Query.

Code: Alles auswählen

.nur-handy{
    display:nome;
}

@media only all and (min-width: 300px) { 
/* Hier deine CSS Klassen die nur für Geräte mit unter 300px Breite gelten sollen */ 
    .nur-handy{
        display:block;
    }
}

Du kannst also Klassen definieren die nur für das Handy gelten. Da kannst du dann auch Klassen die du vorher schon verwendet hast überschreiben und so Elemente auf Desktop und Handy verschieden aussehen lassen.

Gruß Tobi

[dieter99]

Es gibt CSS-Klassen für die mobile Ansicht und CSS-Klassen für den Desktop-PC. Doch wo sitzt die Intellegenz die darüber entscheidet, wann welche CSS Klasse aktiviert werden soll?

Das ist simples CSS und nennt sich Media Query.

Soviel ich weiß funktionieren die Media_Queries nur mit Browsern, die CSS3 unterstützen. Wie geht phpbb vor, wenn kein CSS3 zur Verfügung steht?

[Crizzo]

Laut: https://wiki.selfhtml.org/wiki/CSS/Media_Queries ist das eine CSS 2.0 und 2.1 Funktion.
Ansonsten gilt wie immer: Eigenschaften und Co die CSS nicht kennt, werden einfach ignoriert.