Endgeräte für Cometvisu

[Shoko]

Wie kann ich denn der Visu abgewöhnen, dass sie auf mobilen Browsern anders dargestellt wird?

Wenn ich die Visu auf dem Nexus aufrufe, sieht sie so aus:



Getestet auf mehreren Browsern, jedesmal dasselbe, schlevhte Ergebnis.

Beim mobilen Chrome gibt es die Option "Desktop Version anfordern".
Aktiviere ich die, passt es:



Kann ich das serverseitig so konfigurieren, dass immer die Desktop Version gezeigt wird?

Danke
Michael

Edit: Sorry für die riesigen Bilder, ich habs direkt über Tapatalk vom Nexus aus gesendet und das versteht Tapatalk unter "klein".

[JuMi2006]

Einfach die mobile.css im Design-Ordner umbenennen/löschen/auskommentieren.

[Shoko]

Das hab ich schon probiert, das hilft nichts.

[peuter]

Ich hätte da einen Lösungsvorschlag. Da ich das momentan nicht testen kann, will ich das noch nicht direkt einchecken und beschreibe hier erstmal den manuellen Weg:

Versuch mal in der templateengine.js in Zeile 362, durch diese zu ersetzen

if (!/(android|blackberry|iphone|ipod|series60|symbian|windows ce|palm)/i.test(navigator.userAgent.toLowerCase()) || $(window).width()>=800) {

Das ist vermutlich nicht als entgültige Lösung zu gebrauchen, vor allem weil ich den Wert von 800 (Fensterbreite, ab der die "Desktop-Version" benutzt wird) erstmal einfach aus dem Bauch heraus so festgelegt habe, aber zumindest ein Anfang. Nachdem ich festgestellt habe, dass unter dem aktuellen Firefox 15 der Workaround "Desktop-Version anfordern" nicht mehr funktioniert, stehe ich vor dem selben Problem.

[Shoko]

Vielen Dank, das mit der Breite ist allerdings wirklich suboptimal, denn wenn ich die Seite lade, während sich das Nexus im Portrait-Modus befindet, habe ich wieder die mobile Ansicht.
Drehe ich das Nexus erst auf Landscape und lade die Seite dann, dann habe ich den Desktop Modus.

Ich habe für mich jetzt das if statement komplett entfernt, da ich keine Mobile Version brauche.

Allgemeingültig löst das aber das Problem noch nicht.
Eventuell wäre da ein switch in der Visu Config denkbar, etwa "force-desktop=true"?

Trotzdem schonmal danke!

[Bodo]

Uuups falscher Fred, sorry

[Chris M.]

Einfach die mobile.css im Design-Ordner umbenennen/löschen/auskommentieren.

Das ist keine Lösung - denn die würde bei jedem Release bzw. Paket-Update wieder drüber gebügelt werden.
=> Wer so etwas will, muss in der privaten CSS übersteuern, wird aber auf Dauer wohl auch keinen Spaß machen.

Wesentlich besser ist es im Design die störenden Unterschiede zu lösen.
Die mobile.css ist das Pflaster, dass hilft auf Geräten mit geringer Auflösung trotzdem den Inhalt darstellen zu können.
=> Entweder ist das Pflaster noch nicht richtig
=> oder das Pflaster greift zu oft (also auch bei Auflösungen, die das nicht mehr brauchen würden)

Also bitte die Ursache und nicht die Symptome lösen.

[netsrac]

Kann man die Visu auf dem Nexus auch ohne die Browser Tab's und Adressleiste laufen lassen?!

Beim iOS kann ich ein Icon auf den Desktop legen und mit entsprechenden Meta-Tags dafür sorgen, dass es "fast" wie eine native App aussieht...

[vento66]

Am Ende ist es aber wieder der Safari der da greift.


Sent from my IPhone using Tapatalk

[peuter]

Die mobile.css ist das Pflaster, dass hilft auf Geräten mit geringer Auflösung trotzdem den Inhalt darstellen zu können.
=> Entweder ist das Pflaster noch nicht richtig
=> oder das Pflaster greift zu oft (also auch bei Auflösungen, die das nicht mehr brauchen würden)

Im Falle eines Android-Tablets wird das Pflaster mobile.css garnicht benutzt, da diese eine höhere Auflösung haben. Das Problem besteht hier in der setup_page Funktion in diesen Zeilen:

 if (!/(android|blackberry|iphone|ipod|series60|symbian|windows ce|palm)/i.test(navigator.userAgent.toLowerCase())) {
    var allContainer = $('.widget_container');
    allContainer.each(function(i, e) {
      var ourColspan = $(e).children('*:first-child').data('colspan');
      var areaColspan = $(e).parentsUntil('#centerContainer').last().data('columns') || 12;
      var ourWidth = ourColspan/areaColspan*100;
      $(e).css('width', ourWidth+'%');
    });
  
    // and elements inside groups
    var adjustableElements = $('.group .widget_container');
    adjustableElements.each(function(i, e) {
      var groupColspan = $(e).parentsUntil('.widget_container', '.group').data('colspan');
      var ourColspan = $(e).children('.widget').data('colspan');
      var ourWidth = ourColspan/groupColspan*100;  // in percent
      $(e).css('width', ourWidth+'%');
    });
  };

Ich vermute mal, das die If-Schleife bewirken soll, dass der Code für Handys nicht ausgeführt wird. Jedoch werden hiermit alle Android-Geräte, also auch alle Tablets, ausgeschlossen. Wenn man nun in seinem Android Browser die Desktop-Version anfordert, sendet der Browser einen User-Agent in dem das Wort Android nicht vorkommt und somit wird der Code auch benutzt. Dadurch ergeben sich die unterschiedlichen Darstellungen.

Im Grunde müsste man in der If-Schleife nicht den User-Agent abfragen sonder eher die Fensterbreite. Dann müsste der Code aber bei jeden Resize ausgeführt werden, damit z.B. beim Drehen eines Tablets die Breiten der Spalten passen.

Ich experimentiere auch gerade mal mit der Idee, die Anzahl der Spalten pro Zeile anhand der Fensterbreite anzupassen. D.h. großer Bildschirm 12-Spalten (wie immer), kleinerer Bildschirm 6-Spalten, noch kleiner 4-Spalten usw.
Wenn ich dann zum Beispiel 4 Switches, die jeweils 3 Spalten belegen habe, dann sind die auf dem großen Schirm alle in einer Zeile, auf dem kleineren 2 pro Zeile in 2 Zeilen. Beim kleinsten Schirm tritt dann gleich das 1. Problem an dieser Idee auf. Ich habe pro Zeile einen Switch, der zum rechten Bildschirmrand eine Lücke von einer Spaltengröße hat.
Meiner Meinung nach könnte man mit dieser Variante, die Skalierung auf verschiedene Bildschirmgrößen eleganter lösen, allerdings holt man sich damit auch ne Menge neuer Probleme ins Haus, die ich im Moment noch garnicht wirklich überblicken kann.

[vlamers]

Ich musste für ein LG 4x die Pixel auf 800 erhöhen, dass es noch funktioniert.
Da bewege ich mich aber in einem Bereich dass das billig China pad auch die Mobile Ansicht bekommt. (7Zoll)
Kann man evtl eine Kombination aus beiden verwenden? (Pixel und UA)

Gruß

[greentux]

Oder doch in der URL mit kodieren. Ohne Automatismus. Im Grunde ist ja jedem klar, welche Variante er möchte... Die Geräte selbst sind bei jedem User ja schon eher statischer Natur...

[Chris M.]

Kann man evtl eine Kombination aus beiden verwenden? (Pixel und UA)

Nach UA zu filtern halte ich für suboptimal - denn das sagt eigentlich gar nichts.

Entscheidend ist die Auflösung - also die Menge der Pixel und die Abmessung.

Manche Dinge wie Buttons müssen nach physikalischer Größe gehen, da ein Finger einfach eine gewisse Abmessung hat.
Andere gehen nach der Zahl der Pixel, da z.B. ein schmaler Rahmen halt nicht kleiner als 1 Pixel werden kann...

=> Eigentlich müssten wir die reale Pixel-Dichte bestimmen, damit und mit der Auflösung die reale Bildschirmbreite bestimmen und damit dann entscheiden.

[peuter]

So ich hab mal einen Versuch ins SVN geladen um die Darstellung der Visu auf verschiedenen Fensterbreiten zu verbessern. Eine Sache vorab: Das ist jetzt noch nicht als entgültige, benutzbare Lösung zu verstehen, sondern eher als Diskussionsgrundlage ob das ein möglicher Weg sein könnte. Ich habe zwar nach bestem Wissen und Gewissen getestet, aber meine Auswahl an Endgeräten ist beschränkt.

Nun zum Thema: Wie ich das schonmal in dieser Thread versucht habe zu erklären, wird hier die Anzahl der Spalten pro Zeile angepasst, d.h. bei kleineren Bildschirmen wird dieser Wert reduziert. Somit passen dann weniger Widgets in eine Zeile.
Das Feature ist erstmal nur für Mobil-Geräte aktiviert, ansonsten ausgeschaltet. Es lässt sich über die Config einschalten und feinjustieren, dazu gib es 3 neue Attribute im pages Element:

1. enable_column_adjustment (true|false): schaltet das Feature ein oder aus (default: false)
2. default_columns (1-12): Anzahl der Spalten fest vorgeben (default: 12)
3. min_column_width (int): Minimale Breite einer Spalte. Nur für die Berechnung, wieviele Spalten in eine Zeile passen, nicht um die tatsächliche Spaltenbreite festzulegen (default: 150)

Bitte probiert das mal aus mit unterschiedlichen Endgeräten/Designs/Configs. Wenns garnicht funktioniert fliegts wieder raus, aber bei mir skaliert das recht gut.
Am Besten kann man das testen, wenn man einfach mal manuell die Breite des Browserfensters verändert, da sieht man ganz gut wie die Widgets umgeordnet werden.

[peuter]

Bitte probiert das mal aus mit unterschiedlichen Endgeräten/Designs/Configs. Wenns garnicht funktioniert fliegts wieder raus, aber bei mir skaliert das recht gut.

Hat das bis jetzt keiner getestet oder gibts tatsächlich keine Probleme?