Problem mit px-Abgaben auf verschiedenen Endgeräten

[Robert_Mini]

Möchte gerade die Visu an PC und Tablet anpassen, und versuche so weit wie möglich mit der gleichen Config zu kommen.

Dabei verstehe ich folgendes Verhalten nicht:
- Tablet 1920x1080: Angabe von 1000px für die Diagrammbreite erforderlich
- PC: auflösung 1600x900: Trotz der kleineren Auflösung ist das Diagramm kleiner und der Bildschirm bleibt am Rand leer?

Gleiches ist mir auch bei den Hintergründen der 2D Seiten und images in Web-widgets aufgefallen.

Design ist Metal, Browser Firefox auf beiden Geräten.

Wer kann hier helfen?
Wie macht ihr das bei 2 Endgeräten. Im Moment komme ich nicht um mehrere Configs herum.

lg
Robert

[dombn]

Das Tablet wird ein High-DPI/»Retina-Display« haben und mit einer »virtuellen Größe« (Viewport) arbeiten. Falls es keine Extra-Angaben dazu gibt, üblicherweise mit 980 Pixeln, die dann auf die »echten« Pixel skaliert werden. Ganz gut erklärt wird das hier: Ein Blick durch den Viewport | Webkrauts

Statt mehrerer Configs sehe ich zwei Lösungsmöglichkeiten, die du ggf. auch verbinden kannst:

1. verzichte auf Pixelangaben und arbeite nur mit den layout-Tags (und ggf. mit enable_column_adjustment="true" in pages)
2. verwende CSS-Media-Queries, mit denen du die Pixelgrößen »überschreibst«
   (Tipps dazu z.B. im o.g. Artikel, in der SELFTHTML-Wiki oder per google)

Beispiel für die custom.css:

/* ... */


/* Regel für deinen Desktop-Browser */

.custom_fullwidth { width: 1500px; }


@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) 
{    
    /* hier kommen alle Selektoren rein, die Werte für das Tablet überschreiben */
    .custom_fullwidth { width: 1000px; } 
}

Dem jeweiligen Element müsstest du dann nur per class="fullwidth" die Klasse (oder wie auch immer du die nennst) zuordnen. Zusätzlich kann es sein, dass du statt »2« und »129dpi« z.B. »1.25« und »120dpi« verwenden musst (sie auch Beispiele hier: Retina Display Media Query | CSS-Tricks). Statt mit solch einer Klasse kannst du natürlich auch mit allen anderen CSS-Selektoren arbeiten. Man muss halt nur aufpassen, dass die »Spezifität« (siehe hier) beim Überschreiben größer als die des zu überschreibenden Selektors sein muss.


Zur Zeit verwende ich »nur« die 1. Methode, was für Desktop und Tablet (iPad) meist ganz gut klappt (die Diagramme klappen immer, auch ohne Extra-Angaben; nur manchmal passen die Elemente nicht so ganz auf dem iPad und auf dem Desktop siehts »sehr« luftig aus und nicht immer werden die runden Exken korrekt gesetzt). Auf dem Smartphone passt die Config dann nur noch bedingt, bis gar nicht (Platz reicht nicht und es wird unschön umgebrochen). Allerdings bin ich noch sehr am Anfang mit der CometVisu (»keine-Zeit-dafür-Problem«).

[Robert_Mini]

Danke für deine Tipps.

Werd das bei Gelegenheit probieren.

Was ich auf die Schnelle getestet habe, ist das Weglassen der px Angaben bei Diagrammen.

Klappt soweit gut bezüglich der Breite (zusammen mit colspan), aber die Höhe wird dann auf irgendeinen Defaultwert gesetzt.

Wäre schön, wenn ein diagramm widget auch die Höhe auf die rowspan-Angabe berücksichtigen würde! => Werde dazu einen Feature request stellen.
In Summe ist dieser Ansatz sicher der beste, denn px Angaben sind generell Mist bei unterschiedlichen physikalischen Auflösungen und Display-Größen.

Danke und lg
Robert