Mobile Geräte: Funktionen ausblenden oder abschalten! Aktualisiert 23.10.18
Hier im Forum sind die verschiedensten Effekte und Funktionen verbaut! Wird auf mobilen Geräten die klassische Webseite angezeigt (nicht mobiles Xobor-Template), sind einige Effekte und Funktionen, entweder nicht mehr erforderlich, stören sogar oder haben keine Wirkung. Darum ist es von Vorteil, sie abzuschalten oder am einfachsten, sie auszublenden!
eini1971 hat im Support schon einiges darüber geschrieben. Die Schwierigkeit liegt allerdings darin, die mobilen Endgeräte sicher zu erkennen. Mir ist aufgefallen, das einige Funktionen oder Formatierungen sich nicht ausführen ließen! Hat man das Script anders platziert, funktionierte es wieder! [nerd2] Mit einem kleinen Trick kann man das Script im vollem Funktionsumfang, ohne das Template zu verändern, in die "Fußzeile" setzen!
Im Script habe ich folgende Funktionen ausgeblenden:
Hintergrundwechsler (Plugin 'Hintergrundbild Wechsler mit Local Storage')
Pfeil-Navigation (Plugin 'Pfeile Up Down')
Laufschrift (Plugin 'Animationen&Laufschrift')
Seiten-Panel (Plugin 'Slides and Stripes')
Lesezeichen (Plugin 'Lesezeichen')
Tooltipps (Funktion auf Smartphone unzureichend und nicht erforderlich)
Funktionen auf mobilen Geräten abschalten (ohne Eingriff ins Template):
Folgende Ausblendungen wurden mit jQuery umgesetzt (in allen Template bereits vorhanden!)
Damit das Script gut funktioniert und überall positioniert werden kann, wird es mit $(function(){...}) umschlossen!
Will man weitere Funktionen ausblenden, braucht man nur den entsprechenden Div-Container über den Quelltext zu finden und die class oder id in Zeile 7 mit einfügen!
Es sind auch weitere CSS-Formatierungen möglich!
Das Script kommt in die Fußzeile oder besser als Plugin in den "bottom_footer"!
Mobile Geräte: Funktionen aus- und einblenden über CSS!
Eine weitere und auch vorteilhafte Möglichkeit mobil Einstellungen im Forum zu verändern, geht über die CSS! Mit "@media" ist es auch möglich die Größe anzusprechen! Bleibt man mit der maximal eingestellten Breite unter "768px", wird die Webseite unverändert auch auf Tabletts angezeigt! Über "1024px" wird auf allen mobilen Geräte nichts verändert!
Funktionen auf mobilen Geräten über die CSS verändern (ohne Eingriff ins Template): Mit den folgenden Einstellungen können auf mobilen Geräten alle Funktionen, die über eine "class " oder "id " ansprechbar sind, ein- und ausgeblendet, in ihrer Farbe und Form verändern werden!
• Mit "max-device-width: 767px" (Zeile 2 ) sind die CSS-Eintragungen auf Tablets ohne Wirkung! • Mit "max-device-width: 1023px" (Zeile 2 ) werden alle mobilen Endgeräte angesprochen! • Beispiele in Zeile 4-14 • Achtung! - "@media" hat eigene Klammern {.....} (Zeile 2 + 7 ) • Eintragung in "Eigener CSS Code"!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/* Mobil - keine Veränderung auf Tablets*/ @media all and (max-device-width: 767px){
/* Chat und Activity Einstellungen (Titelleiste) werden ausgeblendet */ .disconnected, .activity_settings {display:none !important;}
/* Hintergrundbild wird durch Hintergrundfarbe ersetzt! */ body{background:#223376 !important}
/*UI-Tooltips werden ausgeblendet */ .ui-tooltip {display:none !important;}
/* Activity Feed wird in der Darstellung der Höhe verändert */ .page_forum .lastactions, ul.lastactions {max-height:300pt !important;}
Funktionen nur für stationäre Endgeräte über die CSS einblenden (ohne Eingriff ins Template): Oft ist es so, dass auszublendende Funktionen auf mobilen Endgeräte kurz angezeigt und dann erst ausgeblendet werden! Das liegt daran, das die Scripte und Funktionen erst geladen werden müssen! Um dieses zu verhindern, kann man die Funktionen in Grundstellung alle ausblenden und wenn kein mobiles Gerät angesprochen wird, wieder einblenden!
• Mit "min-device-width: 768px" (Zeile 2 ) werden Funktionen noch auf Tablets eingeblendet! • Mit "min-device-width: 1024px" (Zeile 2 ) werden Funktionen nur auf stationären Endgeräte eingeblendet! • Beispiele in Zeile 4+5 • Achtung! - "@media" hat eigene Klammern {.....} (Zeile 2 + 16 ) • Eintragung in "Eigener CSS Code"!
1 2 3 4 5 6 7
/* Nicht Mobil / nur stationär! */ @media all and (min-device-width: 768px){