[Gelöst] Umrechnung px –> % Fehler in VIS oder Denkfehler
-
Hallo,
ich versuche gerade mein Views dynamisch an die vom Cleint vorhandene Auflösung anzupassen.
Naiv wie ich bin dachte ich mir das sollte im großen und ganzen über eine Änderung von "px" in "%" möglich sein aber irgendwie hakt es da.
Ich habe überwiegend Ipad 2 an den Wänden hängen mit Auflösung 1024x768, diese Auflösung habe ich also eingestellt.
Wenn ich jetzt z.B. ein Widget nehme welches mein Hintergrund werden soll und mir das in "px" Werten auf 1024x768 einstelle ist alles ok.
Wenn ich das jetzt durch klicken auf die "px" icon hinter den Widget Einstellungen umstelle hätte ich erwartet das für höhe und breite 100% rauskommt.
In realität sieht es aber so aus:
Wenn ich mir das dann auf dem Ipad ansehe habe ich rechts und unten einen weißen Rand.
Wo mache ich denn hier den Fehler oder ist das ein Fehler in Vis?
Danke und Gruß
Mirko
-
Du schaust es dir sicherlich nicht in 1024x768 auf deinem Monitor an, oder?
Imho beziehen sich die % auf den sichtbaren Bereich der Bearbeitungsfläche.
Wenn du also 100% einstellst, wird dein Hinterrgundbild im Editier Modus immer dene gesamte Bearbeitungsfläche ausfüllen, egal wie größ oder klein du sie schiebst. Probier es mal aus
Gedanke / Frage zum Thema Responsive:
1024 x 768 ist ein Verhältnis von 1,33 : 1. Wenn du also auf ein moderneres Gerät umstellst, wird wahrscheinlich vieles verzogen sein. Die meisten aktuellen Geräte haben ja eine Auflösung (real) von 1280 x 800, also 1,6 : 1
-
Denke du hast recht auch wenn es für mich dann keinen Sinn ergibt.
Wenn ich zuerst die Auflösung meines Devices festlege und in DIESER Auflösung mein View baue bin ich der Meinung man sollte auch bei der ausgewählten Auflösung mit "%" arbeiten und nicht bei der zur Bearbeitung Verfügung stehenden.
Frage mich wie andere das machen wenn man unterschiedliche Auflösungen nutzen möchte?
Für jedes ein eigenes Projekt!? :shock:
-
Genau das. Oder responsive à la Material Design.
Für mich ergibt es übrigens absolut Sinn, 100% = sichtbarer Bereich zu setzen. Denn nur dann stimmt ja die inherente Aussage "unabhängig vom Display werden immer 100% ausgefüllt".
Dein Ansatz für responsive geht ja auch, aber eben nicht, wenn man verschiedene Seitenverhältnisse hat. Aber dafür kann ja VIS dann auch nichts. Ein Background Bild mit Seitenverhaltnis 1,6 : 1 passt nunmal nicht ideal auf 1,33 : 1.
-
Genau das. Oder responsive à la Material Design.
Für mich ergibt es übrigens absolut Sinn, 100% = sichtbarer Bereich zu setzen. Denn nur dann stimmt ja die inherente Aussage "unabhängig vom Display werden immer 100% ausgefüllt".
Dein Ansatz für responsive geht ja auch, aber eben nicht, wenn man verschiedene Seitenverhältnisse hat. Aber dafür kann ja VIS dann auch nichts. Ein Background Bild mit Seitenverhaltnis 1,6 : 1 passt nunmal nicht ideal auf 1,33 : 1. `
Wie geht denn das responsive à la Material Design ?
Dann müsste doch im umkehr schluss, wenn ich keine Auflösung auswähle und alles in "%" anwähle die Auflösung für jedes Display passen, oder nicht!?
-
Da müsstest du bitte in den Thread von uhula schauen oder auf github. Ich nutze nur einige Design Dinge aber nicht den responsiven Teil.
> Dann müsste doch im umkehr schluss, wenn ich keine Auflösung auswähle und alles in "%" anwähle die Auflösung für jedes Display passen, oder nicht!?Es sollten immer die gleichen Prozentwerte des sichtbaren Bereich genommen werden, wie du es angibst. Insoweit also "ja".
Aber nochmal: dein Problem wird (bzw kann) sein, dass du eben aktuell Auflösungen mit inwzischen eher ungewöhnlichem Seitenverhältnis nutzt.
D.h. wenn du z.B. ein Widget nimmst und es quadratisch haben willst, dann wird es bei 1024x768 z.B. 5% / 6,67% sein. (entspricht rd 51 px / 51px)
Wenn du dann ein Display mit 1280 x 800 px nimmst, werden daraus auf einmal 64px / 53,36px, d.h. dein Widget wird gestreckt sein. (5% von 1280 x 6,67% von 800)
Zumindest ist das mein Verständnis der Funktionsweise, ich kann mich natürlich irren.
-
Das mit dem Quadratisch ist genauso wie du es beschreibst.
Wäre zwar schön wenn es anders wäre aber aber geht scheinbar nicht mit einfachen mitteln.
-
probier mal das hier:
Width 10%
Height calc(width * 75%)
ich kanns leider aktuell nicht auf diversen Auflösungen testen
-
Werde ich machen.
Wo findet man die möglichen kombinationen die man in die Felder eintragen kann?
-
Das ist einfach CSS, davon verstehe ich allerdings nicht viel. Ich habe also mal im sinne von "lmgtfy" (let me google that for you) nach CSS Seitenverhältnis gegooglet.
die 75% sind der Umkehrwert deines Seitenverhältnisses
Nachtrag:
das hier scheint auch zu gehen und dürfte nach meinem Verständnis dann immer funktionieren
width 10%
height calc(width/(1/device-aspect-ratio))
Nachtrag 2: Damit wird dann imho immer ein quadratisches Verhältnis gewahrt. Für andere Formen müsstest du also Anpassungen vornehmen
Nachtrag 3: nee, das geht irgendwie doch net
-
CSS…. es gibt noch soviel zu lernen auf der Welt
-
Das ist einfach CSS, davon verstehe ich allerdings nicht viel. Ich habe also mal im sinne von "lmgtfy" (let me google that for you) nach CSS Seitenverhältnis gegooglet.
die 75% sind der Umkehrwert deines Seitenverhältnisses
Nachtrag:
das hier scheint auch zu gehen und dürfte nach meinem Verständnis dann immer funktionieren
width 10%
height calc(width/(1/device-aspect-ratio))
Nachtrag 2: Damit wird dann imho immer ein quadratisches Verhältnis gewahrt. Für andere Formen müsstest du also Anpassungen vornehmen
Nachtrag 3: nee, das geht irgendwie doch net
`Auch gerade getestet. Wird nicht quadratisch.
Werde auch mal Tante Google bemühen.
