[~gelöst] VIS2.0 + Visu App - Android - Screengröße + starr

Cyberraph

Hallo Zusammen!

Wahrscheinlich übersehe ich was.

Gibt es für VIS2.0 irgendwo eine Dokumentation, was die einzelnen Einstellungen unter den Einstellungen im VIS2.0 Editor bedeuten?
Auf der Github Seite der VIS2.0 habe ich im Detail nichts lesen können dazu.

Ich habe natürlich herumprobiert.
Vieles davon ist mir im Detail nicht klar geworden, was es verändert.

Im speziellen "Body overflow":
-> auto
-> scroll
-> hidden
-> visible

Ich selbst hatte schon mal die Frage gestellt inkl. andere Forumsbeiträge gelesen,
wo es um Scrollverhalten und sichtbare / auftretende Seitenleisten horizontal oder vertikal ging,
die eigentlich nicht mehr auftauchen sollten, wenn man die Pixel Breite x Höhe der VIS-Oberfläche begrenzt.

Da ich länger wieder nichts mehr getan habe mit der VIS und ich jetzt mein Fire HD 10 Tablet besser einrichten wollte,
bin ich wieder auf dieselbe Hürde gestoßen, dass ich egal was ich einstelle
immer ein vertikaler Scrollbalken auftaucht, wenn ich vertikal per Touch auf das Display einwirke.
(Oberfläche läuft per Fully Kiosk Browser am Fire HD 10 Tablet)

Es soll die Oberfläche unbeweglich sein, wenn sie komplett herausgezoomt ist.
D.h. Scrollbars sollten nur erscheinen, wenn man manuell reinzoomt.

Am nähesten dahin komme ich mit der Einstellung Body overflow = hidden

Laut Google sollte dies eigentlich heißen, dass keine Scrollbar erscheint.

Sie erscheint aber.
Aber es ist wenigsten so, dass die Oberfläche starr bleibt und sich trotz Scrollbar nicht bewegen lässt.

Wenn ich andere Body overflow = ... Einstellungen eingebe,
dann ist es so, dass ich trotz korrekter Einstellung lt. Screen-Resolution basic widget = 1280x799 px
dennoch immer die Oberfläche vertikal verschieben kann / scrollen kann um gut 10-20 px rauf und runter.

EDIT:
Ergänzend habe ich für das Projekt CSS eingegeben:

body {
    height: 97%;
}

Das führt zwar dann dazu, dass ich 1280 x 823 als Begrenzung eingeben muss,
aber dann erscheint weder vertikal noch irgendwo anders ein Scrollbalken
und die Oberfläche bleibt starr wie gewünscht.

Es ist dann auch egal was ich als Body overflow einstelle, ob auto, scroll, hidden oder visible.

Auf dem Tablet zeigt das Basic Widget Screenresolution die 1280 x 799 an.
Auf meiner VIS2.0 Editor Overfläche die 1280 x 823 lt. Begrenzung.

Interessant, dass das so "umständlich" einzugeben und herauszufinden ist.

Ich lasse meinen Input hier aber mal liegen. Vielleicht hilft es anderen.

Und auch meine Frage, ob es ggf. irgendwo doch eine Doku dazu gibt, die ich übersehe.

DANKE für euren Input hierzu im voraus. :-)

Meine Blanke VIS hierzu meines Tests:
2025-10-05-Raphael-Tablet.zip

OliverIO · Meine Blanke VIS hierzu meines Tests: 2025-10-05-Raphael-Tablet.zip

@cyberraph

eigentlich sind das meistens die durchgereichten css attribute
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

problem ist wahrscheinlich, das dieses attribut nur auf dem body element wirkt.
da html hierarchisch aufgebaut ist, werden die scrollbalken an einem anderen element auftauchen.
untersuchen kann man das am besten mit den web developer tools mit F12 im chrome,edge,firefox.

Cyberraph

Ergänzend habe ich noch etwas dazugelernt.

Mir ging bislang auch auf den "Keks", dass bei meinem Android Handy - per iobroker "Visu" App
sich die Oberfläche beim Erreichen z.B. des unteren Bildschirmrandes beim Wischen
sich die Oberfläche und dessen Inhalt wie "Gummi" "gestreched" / gedehnt und gezieht hat.

Ich wollte eine starre Oberfläche.

Dies konnte ich erreichen mit CSS Einstellung overscroll-behavior: none.

Dies habe ich nun verallgemeinert als CSS-Stil in meinem Projekt im VIS-2 Editor hinterlegt.
Und dann in jedem Widget unter Generell als CSS-Stil eingetragen.

Frage (falls wer mitliest):
Muss ich dieses CSS wirklich händisch in jedem Widget eintragen?
Oder geht das auch irgendwie global zu setzen?

Zweite Frage
Kann man das auch auf die Oberfläche des "leeren" Hintergrundes anwenden?

Ich muss jetzt z.B. ein Basic HTML Widget komplett als Hintergrund hinter den vollen Screen setzen mit dem o.a. CSS.

Weil für den allgemeinen / leeren Hintergrund hat es noch immer den Effekt des Gummibandes.

Ich konnte es weder, wenn ich unter "Seite" den CSS-Stil eintrage...

Noch, wenn ich es allgemein für den "body" eingetragen hätte für das gesamte Projekt,

für den "leeren Hintergrund" abschalten.

(ohne individuellen CSS-Stil mit "." vor dem Wort d.h. nicht .body)

Das Folgende funktioniert wie gesagt nicht:

body {
    overscroll-behavior: none;
}

Das Weitere war zumindest für die Einzelnen Widgets die Lösung:

OliverIO

@Cyberraph

Schau mal mit den Web Developer Tools vom Browser mit F12 nach
Jedes Widget müsste eine einheitliche CSS Klasse haben.
Damit müsstest du mit einer Anweisung allen Widgets dies zuordnen können.

Cyberraph

@OliverIO Danke dir.

Der Gummiband-Effekt bzw. lt. CSS das erwähnte overscroll-behavior: scheint eine Eigenheit der iobroker visu APP zu sein.

Ich habe unten beigefügte Test-Seite
-> einmal in der iobroker visu APP
-> einmal im Handy Browser : Opera
-> einmal am PC Browser : Firefox
mal geöffnet.

Folgende Erkenntnisse:

Visu APP
Ein Problem ist, dass sich trotz korrekter Größeneinstellungen der Elemente auf den Handy-Screen, die Seite etwas in der Höhe verschieben lässt.
Und unten am Rand beim Nachobenschieben ein weißer Rand entsteht (interessanterweise wird bei diesem nicht die eingestellte VIS-2 Hintergrundfarbe übernommen)

Im CSS die body ... height ##% Vorgabe bewirkt keine Änderung in der Seitenhöhe.
Man muss die Einstellung "Body overflow" auf "hidden" setzen.
Dann lässt sich die Seite nicht mehr verschieben und es ensteht kein weißer Rand mehr am unteren Rand.

Zweites Problem, wie schon erwähnt ist, der Gummibandeffekt, beim nach Unten Wischen und Erreichen des Endes,
ziehen sich alle Elemente außeinander "als visuelles Feedback".

Abhilfe schafft da wohl nur jedem Widget als CSS overscroll-behavior: none mitzugeben. (in meinem Fall .test)

Das sind wohl alles hinterlegte CSS-Eigenschaften, die die iobroker VISU App hinterlegt hat,
dass diese abweichenden oder ergänzenden Eigenschaften auftreten. Als ggü. einem "normalen" Browser.

Mit Einstellung oberscroll-behavior: none + overflow hidden + einem großen Widget als Hintergrund
konnte ich die starre Benutzerobefläche in der iobroker VISU APP per "Umweg" erzielen.

Nachteil bei der Einstellung in VIS-2 von body-overflow = hidden ist, dass man mit einem Finger nicht mehr scrollen kann.
(wie eins weiter beschrieben, ginge hiermit im Standard Browser das Seite neu laden beim Runterwischen nicht mehr)

Browser
Am Handy Browser ist alles starr und kein Gummiband tritt auf.
Die Body-overflow Einstellung musste ich auf auto stellen.
Damit ich noch das Verhalten habe bei mir in OPERA,
dass ich weiter nach unten ziehen und dadurch die Funktion des Seite neu ladens noch benutzen kann.
Andernfalls bei Hidden ließ sich die Seite nicht mehr nach unten ziehen.

Was aber bei auto passiert, ist dass auch im Opera Browser egal bei welcher Größeneinstellungen an den Handyscreen,
sich die gesamte Seite auch hier etwas bewegen lässt in der Höhe.
Hier braucht es dann doch die CSS body ... height ##% Einstellung (in meinem Fall 99%),
damit der body nicht größer ist als der Handy-Screen.

Mit o.a. Einstellung konnte ich die starre Benutzerobefläche im Browser erzielen.

Vermerk auf folgende Einstellungen:

Folgende VIS-2 Seite habe ich erstellt und getestet.

{
 "name": "Tempertur + Feuchte",
 "settings": {
   "style": {
     "font-size": "",
     "font-style": "",
     "background_class": "",
     "background-color": "rgba(105,92,168,1)",
     "color": "rgba(220,211,211,1)"
   },
   "navigation": false,
   "navigationBar": false,
   "theme": "",
   "navigationBarColor": "rgba(61,107,55,0.73)",
   "navigationBarIcon": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCIgdmlld0JveD0iMCAwIDgwIDgwIiBkYXRhLWFwcD0iWHlyaXMiPgogICAgPGRlZnM+CiAgICA8L2RlZnM+CiAgICA8ZyB0cmFuc2Zvcm0tb3JpZ2luPSJib3R0b20iIHN0eWxlPSJ0cmFuc2Zvcm0tYm94OiBmaWxsLWJveDsiIHRyYW5zZm9ybT0iIj4KICAgICAgICA8ZyBpZD0iZy14OG9NSkdQbzk1OUVNN21WZ0FDSmNXIiBvcGFjaXR5PSIxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTczMi41MDI4LC0yMDQ3LjUwMzQpIiB0cmFuc2Zvcm0tb3JpZ2luPSIiPgogICAgICAgICAgICA8ZyBpZD0iZy1iM3BCak11NWU5WTE4QzU3V2lOSEJjIiBvcGFjaXR5PSIxIiB0cmFuc2Zvcm09IiI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZy04ZEh6Y3k2R3J2U1lCV21YaEZaTjM2IiB0cmFuc2Zvcm09IiI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTSAxNzk4LjU4IDIwNjQuOTcgQyAxNzk3LjgyIDIwNjQuMjEgMTc5Ni44IDIwNjMuNzYgMTc5NS43MiAyMDYzLjcyIEMgMTc5NC41OCAyMDYzLjc0IDE3OTMuNDkgMjA2NC4yMiAxNzkyLjY5IDIwNjUuMDQgQyAxNzkxLjg5IDIwNjUuODYgMTc5MS40NCAyMDY2Ljk2IDE3OTEuNDUgMjA2OC4xMSBMIDE3OTEuNDUgMjA4NC42OCBDIDE3OTEuNDYgMjA4NS4zIDE3OTEgMjA4NS44MyAxNzkwLjM5IDIwODUuOTIgQyAxNzkwLjA2IDIwODUuOTUgMTc4OS43MyAyMDg1Ljg0IDE3ODkuNDggMjA4NS42MiBDIDE3ODkuMjMgMjA4NS4zOSAxNzg5LjA5IDIwODUuMDcgMTc4OS4wOSAyMDg0Ljc0IEwgMTc4OS4wOSAyMDU4LjYzIEMgMTc4OS4wOCAyMDU3LjUgMTc4OC42MyAyMDU2LjQzIDE3ODcuODQgMjA1NS42MyBDIDE3ODcuMDggMjA1NC44NiAxNzg2LjA2IDIwNTQuNDIgMTc4NC45OCAyMDU0LjM5IEMgMTc4My44NCAyMDU0LjQyIDE3ODIuNzUgMjA1NC44OSAxNzgxLjk1IDIwNTUuNzEgQyAxNzgxLjE1IDIwNTYuNTMgMTc4MC43IDIwNTcuNjQgMTc4MC43MSAyMDU4Ljc4IEwgMTc4MC43MSAyMDgxLjYgTCAxNzgwLjcxIDIwODEuNiBDIDE3ODAuNzIgMjA4Mi4yMiAxNzgwLjI2IDIwODIuNzUgMTc3OS42NSAyMDgyLjg0IEMgMTc3OS4zMiAyMDgyLjg3IDE3NzguOTkgMjA4Mi43NyAxNzc4Ljc0IDIwODIuNTQgQyAxNzc4LjUgMjA4Mi4zMiAxNzc4LjM2IDIwODIuMDEgMTc3OC4zNSAyMDgxLjY3IEwgMTc3OC4zNSAyMDU2LjE2IEMgMTc3OC4zNSAyMDU0Ljk5IDE3NzcuODggMjA1My44NyAxNzc3LjAzIDIwNTMuMDYgQyAxNzc2LjE5IDIwNTIuMjYgMTc3NS4wNSAyMDUxLjgzIDE3NzMuODggMjA1MS44OCBDIDE3NzIuNzMgMjA1MS45MSAxNzcxLjY0IDIwNTIuMzggMTc3MC44NCAyMDUzLjIgQyAxNzcwLjAzIDIwNTQuMDIgMTc2OS41OSAyMDU1LjEzIDE3NjkuNiAyMDU2LjI3IEwgMTc2OS42IDIwODEuNjUgQyAxNzY5LjYxIDIwODIuMjYgMTc2OS4xNSAyMDgyLjc5IDE3NjguNTQgMjA4Mi44OSBDIDE3NjguMjEgMjA4Mi45MiAxNzY3Ljg4IDIwODIuODEgMTc2Ny42NCAyMDgyLjU5IEMgMTc2Ny4zOSAyMDgyLjM2IDE3NjcuMjUgMjA4Mi4wNSAxNzY3LjI0IDIwODEuNzIgTCAxNzY3LjI0IDIwNjEuNDEgQyAxNzY3LjI0IDIwNjAuMjkgMTc2Ni44MSAyMDU5LjIyIDE3NjYuMDMgMjA1OC40MiBDIDE3NjUuMjUgMjA1Ny42MiAxNzY0LjE4IDIwNTcuMTYgMTc2My4wNyAyMDU3LjEzIEMgMTc2MS45MiAyMDU3LjE1IDE3NjAuODMgMjA1Ny42MyAxNzYwLjAzIDIwNTguNDUgQyAxNzU5LjIyIDIwNTkuMjcgMTc1OC43OCAyMDYwLjM4IDE3NTguNzkgMjA2MS41MiBMIDE3NTguNzkgMjA5My40MiBMIDE3NTQuNTEgMjA4Ny42NSBDIDE3NTMuNjggMjA4Ni41NSAxNzUyLjQ1IDIwODUuODMgMTc1MS4wOCAyMDg1LjY0IEMgMTc0OS43MiAyMDg1LjQ1IDE3NDguMzQgMjA4NS44MSAxNzQ3LjI0IDIwODYuNjQgQyAxNzQ2LjE5IDIwODcuNDMgMTc0NS40OSAyMDg4LjYgMTc0NS4yNiAyMDg5Ljg5IEMgMTc0NS4wNCAyMDkxLjE5IDE3NDUuMzIgMjA5Mi41MiAxNzQ2LjA0IDIwOTMuNjIgTCAxNzUzLjgyIDIxMDYuMDcgQyAxNzU0LjUyIDIxMDcuMTYgMTc1NS4xMiAyMTA4LjMgMTc1NS42NCAyMTA5LjQ4IEwgMTc1NS43OCAyMTA5LjgxIEMgMTc2NC4wOCAyMTI4LjYxIDE3OTEuMjIgMjEyNy4xOCAxNzk3LjQ5IDIxMDcuNjEgQyAxNzk5LjAzIDIxMDIuODIgMTc5OS44MiAyMDk3LjgxIDE3OTkuODIgMjA5Mi43NyBMIDE3OTkuODIgMjA2Ny45NyBDIDE3OTkuODIgMjA2Ni44NSAxNzk5LjM3IDIwNjUuNzcgMTc5OC41OCAyMDY0Ljk3IFoiIGlkPSJwYXRoLTZ3OUZabUt3dndqWDM4OFZiUnVBZ1MiIG9wYWNpdHk9IjEiIGZpbGwtb3BhY2l0eT0iMSIgc3Ryb2tlLXdpZHRoPSIwLjc1MDAwMSIgZmlsbD0iY3VycmVudENvbG9yIiBzdHlsZT0iZGlzcGxheTogaW5saW5lOyAiIHRyYW5zZm9ybT0iIj4KICAgICAgICAgICAgICAgICAgICA8L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGJlZ2luPSItMC4wMDAwMSIgZHVyPSIxLjYwMzI1MTI0MDQyODc5MDIiIGtleVRpbWVzPSIwOyAwLjI0ODM0OTkwNTkxMzU5MzQ2OyAwLjQ5ODUyNDIyODQ0MzcwNTc1OyAwLjc0OTczOTcxMDE5NDc2MzU7IDEiIHZhbHVlcz0iMDsgMTA7IDA7IC0xMDsgMCIgZmlsbD0iZnJlZXplIiBhZGRpdGl2ZT0ic3VtIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwIDAgMSAxOyAwIDAgMSAxOyAwIDAgMSAxOyAwIDAgMSAxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+CiAgICAgICAgPC9hbmltYXRlVHJhbnNmb3JtPgogICAgPC9nPgo8L3N2Zz4K",
   "navigationBarText": "Hallo",
   "useBackground": false,
   "useAsDefault": false,
   "alwaysRender": true,
   "snapType": 0,
   "limitScreen": false,
   "limitScreenBorderWidth": null,
   "limitScreenBorderStyle": "dotted",
   "limitScreenBorderColor": "rgba(216,21,21,1)",
   "limitScreenBackgroundColor": "",
   "columnWidth": null,
   "columnGap": null,
   "rowGap": null,
   "navigationOrder": "2",
   "navigationIcon": "",
   "navigationOrientation": "horizontal",
   "navigationTitle": "",
   "navigationOnlyIcon": false,
   "navigationHeaderTextColor": "",
   "navigationBackground": "rgba(212,29,29,1)",
   "navigationSelectedBackground": "rgba(16,218,48,1)",
   "navigationSelectedColor": "rgba(207,224,13,1)",
   "navigationColor": "rgba(23,62,218,1)",
   "navigationChevronColor": "rgba(223,19,224,1)",
   "navigationHideMenu": false,
   "navigationHideOnSelection": false,
   "navigationHeaderText": "TEST",
   "navigationButtonBackground": true,
   "navigationNoHide": false,
   "navigationImage": "",
   "comment": "",
   "class": "",
   "navigationBarImage": "",
   "sizex": "392",
   "sizey": "787",
   "resolution": "user"
 },
 "widgets": {
   "w000072": {
     "tpl": "tplHtml",
     "data": {
       "bindings": [],
       "g_css_background": true
     },
     "style": {
       "bindings": [],
       "left": 56,
       "top": 46,
       "width": "296px",
       "height": "676px",
       "background-color": "rgba(197,138,138,1)",
       "z-index": "5"
     },
     "widgetSet": "basic"
   },
   "w000094": {
     "tpl": "tplScreenResolution",
     "data": {
       "bindings": [],
       "g_css_font_text": true
     },
     "style": {
       "bindings": [],
       "left": "102px",
       "top": "346px",
       "width": "199px",
       "height": "129px",
       "z-index": "400",
       "color": "rgba(50,18,208,1)"
     },
     "widgetSet": "basic"
   },
   "w000095": {
     "tpl": "tplJquiButtonLink",
     "data": {
       "bindings": [],
       "buttontext": "zu Landscape mit Horizontal Navi",
       "g_common": true,
       "html": "",
       "padding": 8,
       "g_style": true,
       "variant": "contained",
       "color": "",
       "visResizable": false,
       "imageHeight": 100,
       "g_icon": true,
       "modal": true,
       "g_dialog": true,
       "nav_view": "Display-Visu-App-mit-Visu-Navi-Quer",
       "buttontext_view": false,
       "sub_view": null,
       "g_view": true,
       "no_style": false
     },
     "style": {
       "bindings": [],
       "left": 20,
       "top": 178,
       "z-index": "50"
     },
     "widgetSet": "jqui"
   },
   "w000096": {
     "tpl": "tplJquiButtonLink",
     "data": {
       "bindings": [],
       "buttontext": "zu Landscape ohne Horizontal Navi",
       "g_common": true,
       "html": "",
       "padding": 8,
       "g_style": true,
       "variant": "contained",
       "color": "",
       "visResizable": false,
       "imageHeight": 100,
       "g_icon": true,
       "modal": true,
       "g_dialog": true,
       "nav_view": "Display-Visu-App-Quer",
       "buttontext_view": false,
       "sub_view": null,
       "g_view": true,
       "no_style": false
     },
     "style": {
       "bindings": [],
       "left": 20,
       "top": 127,
       "z-index": "50"
     },
     "widgetSet": "jqui"
   },
   "w000097": {
     "tpl": "tplJquiButtonLink",
     "data": {
       "bindings": [],
       "buttontext": "zu Portrait ohne Horizontal Navi",
       "g_common": true,
       "html": "",
       "padding": 8,
       "g_style": true,
       "variant": "contained",
       "color": "",
       "visResizable": false,
       "imageHeight": 100,
       "g_icon": true,
       "modal": true,
       "g_dialog": true,
       "nav_view": "Display-Visu-App-Hoch",
       "buttontext_view": false,
       "sub_view": null,
       "g_view": true,
       "no_style": false
     },
     "style": {
       "bindings": [],
       "left": 20,
       "top": 25,
       "z-index": "50"
     },
     "widgetSet": "jqui"
   },
   "w000098": {
     "tpl": "tplJquiButtonLink",
     "data": {
       "bindings": [],
       "buttontext": "zu Portrait mit Horizontal Navi",
       "g_common": true,
       "html": "",
       "padding": 8,
       "g_style": true,
       "variant": "contained",
       "color": "",
       "visResizable": false,
       "imageHeight": 100,
       "g_icon": true,
       "modal": true,
       "g_dialog": true,
       "nav_view": "Display-Visu-App-mit-Visu-Navi-Hoch",
       "buttontext_view": false,
       "sub_view": null,
       "g_view": true,
       "no_style": false
     },
     "style": {
       "bindings": [],
       "left": 20,
       "top": 76,
       "z-index": "50"
     },
     "widgetSet": "jqui"
   },
   "w000102": {
     "tpl": "tplValueStringRaw",
     "data": {
       "bindings": [],
       "oid": "nothing_selected",
       "test_html": "",
       "g_css_font_text": true,
       "html_append": "Handy Titel + Navi Bar ausgeschaltet"
     },
     "style": {
       "bindings": [],
       "left": 128,
       "top": 255,
       "width": "139px",
       "height": "41px",
       "z-index": "100",
       "color": "rgba(9,9,10,1)",
       "text-align": null,
       "text-shadow": null,
       "font-family": null,
       "font-style": null,
       "font-variant": null,
       "font-weight": null,
       "font-size": null,
       "line-height": null,
       "letter-spacing": null,
       "word-spacing": null
     },
     "widgetSet": "basic"
   }
 },
 "activeWidgets": []
}

OliverIO

@Cyberraph
so ein gummibandeffekt wird uU nicht von einer App definiert, sondern von der verwendeten webview auf einem gerät.
meist ist es so, das alle hersteller von apps, wenn sie html anzeigen wollen, die auf dem gerät definierte webview verwenden (früher mussten). bei ios geräten bedeute dies bspw, das selbst wenn du chrome browser verwendest unter der haube safari steckte. bei android ist es immer chrome. das wollte man regulieren udn auch fremde engines zulassen. den stand kenne ich aktuell nicht.

ist zwar etwas aufwändiger, aber wenn du ein android basiertes gerät hast, kann man mit dem chrome browser auf die browser session des handys schauen

So gehst du vor

Auf dem Android-Gerät die Entwickleroptionen aktivieren. Falls noch nicht geschehen: unter Einstellungen → Telefoninfo mehrfach auf die Build-Nummer tippen.
In den Entwickleroptionen USB-Debugging einschalten.
Smartphone per USB mit dem PC verbinden und die Abfrage auf dem Smartphone „USB-Debugging zulassen?“ bestätigen.
Die ioBroker VIS App öffnen und deine VIS-2-Testseite anzeigen lassen.
Auf dem PC Chrome öffnen und in die Adresszeile eingeben:
chrome://inspect/#devices
Dort muss Discover USB devices / USB-Geräte erkennen aktiviert sein. Das Android-Gerät sollte anschließend unter „Remote Target“ erscheinen. Chrome zeigt dort neben normalen Chrome-Tabs auch debugfähige WebViews von Apps an.
dann auf inspect gehen
über elements hast du dann zugriff auf den entfernten browser und kannst html/css anschauen

wenn man für desktop und mobile unterschiedliche css styles anwenden will kann man die über media queries definieren. bildschirmbreite in pixel oder eine andere css einheit wäre dann die Unterscheidung

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using
https://wiki.selfhtml.org/wiki/Media_Queries

Cyberraph

@OliverIO Danke abermals für deine Mühen mir das etwas näher zu bringen.

Die zwei Tipps helfen.
Das werde ich mal versuchen, um es besser zu verstehen, was per Visu-App passiert.

Und die Möglichkeiten der media queries werde ich mal durchforsten.
Danke für den Tipp.

Interessant was du sagst, dass alle Handy-Browser quasi die Hersteller webview verwenden sollten.
Dann müsste der "Gummiband" Effekt eigentlich auch
bei meinem Opera-Browser am Handy,
als auch Google-Chrome eigentlich sein.
Sofern der webview diesen Gummiband-Effekt macht übergreifend.

Das Gummiband tritt aber wirklich nur in der visu-App laut meiner Erfahrung jetzt.

Das Android Handy ist ein Xiaomi 11 Lite 5G NE.
(Chrome war der Standard Browser ab Werk, hatte ihn aber deinstalliert damals, das sogar ging,
und hatte Opera installiert und als Standardbrowser gemacht)

Egal was es verursacht, ich werde schon eine für mich passende Lösung finden.
Danke für die Erläuterungen jedenfalls.

[EDIT 11.08.2026]
War jetzt gar nicht so leicht.
Zwar laut Oliver oben und nachfoglender Google-Anweisung vorgegangen:
https://developer.chrome.com/docs/devtools/remote-debugging?hl=de

Großes Problem war bei mir, dass mein Xiaomi bei der USB-Verbindung mit dem PC
danach keine Meldung am Handy gab bzgl. Freigabe / Bestätigung der Verbindung.

Laut der Google Anweisung oben kam ich zu einem Forumsbeitrag,
der ein Programm vorgab zu installieren - damit ging die Kommandozeile auf und per Befehl "adb devices" konnte das Popup angestoßen werden, dass es beim Anstecken an den PC am Handy kam.
Nun sehe ich im im Chrome-Browser am PC das angesteckte Handy chrome://inspect/#devices

(wichtig war auch die USB-Verbindung am Handy nicht "nur laden" zu lassen,
sondern zum Datenübertragen einzustellen)

https://stackoverflow.com/questions/21925992/chrome-devtools-devices-does-not-detect-device-when-plugged-in

https://xdaforums.com/t/tool-minimal-adb-and-fastboot-2-9-18.2317790/

Aber meine Erkenntnis:
Das scheint nicht zu funktionieren, dass ich die App = den Seitenaufbau herausziehen könnte.
Wie es per F12 am Desktop möglich ist.

Nachfolgend Screenshots beispielhaft:
-> 2 x TABs im mobilen Chrome Browser geöffnet
-> 1 x iob-Visu APP geöffnet
-> 1 x TAB offen im mobilen OPERA Browser

Am Desktop PC sehe ich im Chrome Browser unter chrome://inspect/#devices
leider nur die 2 Chrome Tabs zur Inspektion. Aber leider nicht die anderen Seiten.

Laut kurzer Google Suche stünde da etwas von,
dass man den Debug Modus der Apps (abseits von Chrome) aktivieren müsste.
Da sehe ich für mich keinen weiteren Weg, dass ich das könnte.

Cyberraph

https://chatgpt.com/share/6a7c568a-ecfc-83eb-a331-f0648ba23163

Interessant was mir Chat GPT da sagt bzgl. dem Gummiband.
Kann aber auch sein, dass GPT nur wohlwollend mich bestätigen möchte und die Aussagen stimmen nicht 100%.

Cyberraph

https://chatgpt.com/share/6a7c5a37-0620-83eb-9673-91630d80707c

Weiterführend zum in der iobroker Visu App enstehenden "Weißen Streifen",
dass ich etwas weiter nach unten scrollen kann. (Was im normalen mobilen Chrome oder Opera Browser nicht ist)

GPT hat folgendes vorgeschlagen:

Und tatsächlich, mit dem html Bereich wird der Streifen rot.
(Der weiße untere Rand wie im Video in Post #5 am angehängt wird geändert)

Cyberraph

Oh mein Gott.
Jetzt habe ich es durch Zufall rausgefunden.

body{
    height: 99% !important;
}

Das !important muss man dazuschreiben, wenn man den body in der iobroker visu App hier z.B. in der Höhe verkleinern möchte.
Andernfalls ohne dem !important wird die body Verkleinerung nur in einem Standard Browser angewendet
und die iobroker visu App ignoriert das CSS laut VIS-2 Projekt.

Man muss den Body etwas kleiner skalieren lassen,
weil die VIS-2 wie oben schon öfters beschrieben
offensichtlich den Body etwas höher erzeugt, als die Screen-Größe des Android Handys / Gerätes.

Damit ist auch die Einstellung der VIS-2 body-overflow egal. Und die Oberfläche bleibt starr.

Dadurch löst sich aber auch das "Problem" mit dem Gummibandeffekt.
Dann ist es für mich persönlich zumindest nicht mehr stören.

Weil mit o.a. Body-Verkleinerung ist die Oberfläche starr.
Somit kann man nicht mehr wischen / scrollen und erreich das Ende oben oder unten der Seite.
Und wenn man kein Ende erreicht gibt es auch kein Gummiband / abfedern / stretchen des Bildinhaltes.

Nur wenn man reinzoomt und dann umherscrollt und zieht.
Aber das ist für mich dann in Ordnung und angenehmer in der Benutzererfahrung.

Puh, wieder was gelernt.
Entschuldigt das viele Geschreibe.

Cyberraph

Verdammt.
Ganz komme ich nicht auf eine vollumfängliche Lösung.

Im Hochformat habe ich es jetzt mit zuvor angeführter Lösung geschafft.

Im Querformat (sowohl in Visu app, als auch im mobilen Browser, Chrome oder OPERA)
ist im Querformat betrachtet die Höhe (schmale Kante) bzgl. HTML / BODY um einiges höher.

Was aber zusätzlich interessant ist, beim mobilen Chrome Browser wird das CSS "html { background: red !important;} nicht nur auf das zugrundeliegende body-element gelegt (nach unten scrollbarer Bereich) sondern auch auf die rechte Navigationsleiste des Android-Handys.

Da kann ich aber jegliche height Einstellung angeben, der body wird ab einem bestimmten Wert
nicht mehr kleiner. Sodass ich es nicht schaffe die Höhe auf den Handy-Screen anzupassen und
es immer scrollbar bleibt, weil darunter noch ein Bereich ist.

Schade... da werde ich noch lange dran kauen.

[EDIT - 12.08.2026]:
Mir ist doch ein Fehler unterlaufen - Querformat hatte einen sehr großen Bereich nach unten,
weil noch ein Widget, das unsichtbar war weiter nach unten reichte.

@oliverio
(wenn ich dich nochmal "anhauen" darf bzgl. nachfolgender Frage, andernfalls frage ich noch anderswo im Forum nach)

Ergänzende Frage aber:
Kann man im VIS-2 Editor pro Seite ein unterschiedliches body { height: ##dvh} zuordnen?
Weil im Querformat muss ich mehr an Höhe anpassen, als im Hochformat, damit die Seite starr bleibt.

Das was mir grob Chat GPT gesagt hat, geht nicht. -> siehe:
https://chatgpt.com/share/6a7ca363-e90c-83eb-8fe5-5123d200e30b

OliverIO

@Cyberraph

Genau weiß ich es nicht, aber jede View hat eine benannte css Klasse. Bin im Urlaub un gaaanz schlechtes Internet hier

Community Forum

NEWS

[~gelöst] VIS2.0 + Visu App - Android - Screengröße + starr

Support us

448

33.0k

83.6k

1.3m