Black Pearl: Höhenverhältnis zum Gesamtbildschirm bei eingeblendeter Smartphone-Tastatur beibehalten

Hallo liebe Forengänger,

bevor ich mein Problem erläutere, kurz ein Vorwort: Das Projekt, an dem ich arbeite, ist nicht für die Öffentlichkeit gedacht, sondern für einen eingewiesenen Nutzerkreis vor Ort. Es handelt sich um die Wertungsmaske eines Kampfrichters, der vorher mit der Technik vertraut gemacht wurde. Darum sind meine Vorstellungen ziemlich fest und richten sich nicht an einer nutzerfreundlichen Darstellung aus. Hierbei steht die Praxis vor Ort im Mittelpunkt.

Ich habe im Grunde eine recht einfache Seite (position:fixed + width und height auf 100%), die grob gesagt aus zwei DIVs besteht. Das obere DIV hat eine Größe von 60%, das untere eine von 40%. Soweit funktioniert alles problemlos, besonders im PC. Bei jeder Bildschirmänderung bleibt alles, wie es ist.

Nun gibt es jedoch das Problem Smartphone/Tablet. Da sich im oberen DIV ein Inputfeld (type=text) befindet, öffnet sich notwendigerweise die Tastatur am unteren Bildschirmrand. Dadurch wird nun jedoch das komplette Bild gestaucht, was ich aus optischen Gründen gern vermeiden möchte. Idealerweise soll sich die Tastatur einfach über den unteren 40% öffnen, sodass die oberen 60% optisch unverändert stehen bleiben. Natürlich könnte ich nun alles auf fixe Pixelwerte ändern, was aber sehr ungünstig wird, da die genutzten Endgeräte sehr unterschiedlich sein können, aber die identische Optik haben sollen.

Habt ihr eventuell einen Geheimtipp für mich, wie ich die Höhen optisch beibehalten kann, wenn sich die Tastatur öffnet? Meine Idee wäre ein Messen der gesamten Display-Maße und nicht nur die des Browser-Fensters. Ist so etwas möglich?

Liebe Grüße

Daniel

  1. Hallo,

    Geheimtipp

    da es sowieso nur um eingewiesene Personen geht: zeig in der Einweisung, dass man zur schwebenden Tastatur wechseln kann....

    Gruß
    Kalk

    1. Hallo Tabellenkalk,

      erzähl mal. Wie macht man das? Und wie universell ist das?

      Denn meine schnelle Websuche sagt mir: Das ist Samsung-spezifisch. Ich hab auch ein "GBoard" gefunden, aber das scheint eine eigene Tastatur-App von Google zu sein. Schaue ich da an der richtigen Stelle?

      Rolf

      --
      sumpsi - posui - obstruxi
      1. Hi,

        Denn meine schnelle Websuche sagt mir: Das ist Samsung-spezifisch. Ich hab auch ein "GBoard" gefunden, aber das scheint eine eigene Tastatur-App von Google zu sein. Schaue ich da an der richtigen Stelle?

        Also mein Huawei kann auch schwebende Tastatur - wie ich gerade gelernt habe.

        cu,
        Andreas a/k/a MudGuard

      2. Hallo,

        Wie macht man das?

        Bei mir hab ich eine Symbolleiste mit einem icon, das ein Keyboard über einem weiteren Rechteck symbolisiert. Damit kommt man zur entsprechenden Auswahl.

        Und wie universell ist das?

        Das weiß ich natürlich nicht, aber Androiden mit halbwegs aktueller Version sollten das können.
        Iphones ab ios13 kriegen das möglicherweise auch hin.

        Gruß
        Kalk

        Edith glaubt, eventüll muss das erst in den Einstellungen aktiviert werden…

        1. Das weiß ich natürlich nicht, aber Androiden mit halbwegs aktueller Version sollten das können.
          Iphones ab ios13 kriegen das möglicherweise auch hin.

          iPhone SE (GEN 1) mit aktuellem iOS (14.6) gerade probiert: negativ. Lt. kurzer Recherche ist das bei Apple nur bei den iPads vorgesehen. Ergo nicht wirklich universell.

    2. Hi,

      Geheimtipp da es sowieso nur um eingewiesene Personen geht: zeig in der Einweisung, dass man zur schwebenden Tastatur wechseln kann....

      Danke - kannte ich noch nicht.

      Sehr nützlich!

      cu,
      Andreas a/k/a MudGuard

    3. Hallo Kalk,

      danke für den Hinweis, ich werde mich mal dazu belesen. Allerdings wäre mir eine css-Lösung oder auch javascript deutlich lieber, als mich erst bei jedem verwendeten Gerät stundenlang vorher zu belesen. Denn es werden bei jeder Veranstaltung neue bzw. verschiedene Geräte genutzt und ich kann nicht für jedes einzelne Gerät noch eine Einzeleinweisung machen. So viel Zeit haben wir vor Wettkampfbeginn leider nicht. Zudem zeigen mir die Antworten der anderen, dass es gar nicht bei jedem Endgerät möglich ist. Und da, je nach Verein, auch ältere Geräte zum Einsatz kommen, die nicht immer die aktuellste Android- oder Apple-Version haben, kann es da noch einmal Probleme geben.

      Gibt es denn keine Lösung, die ich in meinen Quelltext einbinden kann?

      Liebe Grüße

      Daniel

      1. Hallo Black,

        spontan nicht. Du musst hinnehmen, dass ein responsives Design sich an Veränderungen des Viewpors anpasst, und das passiert nun mal, wenn die Bildschirmtastatur erscheint.

        Du kannst aber über min-height sicherstellen, dass dein oberes div nicht zu sehr zusammengeschoben wird.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. Hallo Rolf,

          das ist sehr ärgerlich. Ich hatte gehofft, es gäbe einen Trick dafür.

          Ich werde es mal so versuchen, dass ich mir per javascript beim Laden der Seite die screen-daten in Pixel hole und sie dann mit PHP verarbeiten lasse, um anschließend die Prozentangaben in Pixeln (relativ zum screen) auszugeben. Keine Ahnung, ob das funktioniert, aber mit ein wenig Bastelei habe ich vielleicht Glück. 😉

          Liebe Grüße

          Daniel

          1. Hallo Black Pearl,

            es ist keine gute Idee, das am Server zu erledigen. Die erforderlichen Aktionen kannst Du komplett am Client ausführen.

            Es ist auch keine gute Idee, die Screen-Größe zu verwenden. Diese Daten sind nur von Bedeutung, wenn die Webseite fullscreen angezeigt wird. Zu einem Gerät mit größenveränderlichen Fenstern - was auch ein neueres Tablet sein kann! - passt diese Vorgehensweise nicht.

            Vor allem solltest Du versuchen, ohne JavaScript auszukommen. Layout ist eine Aufgabe für CSS und es ist dafür wesentlich besser geeignet.

            Beachte beispielsweise das Problem, dass jemand sein Handy ins Querformat dreht. Eine Pixelberechnung beim Seitenaufruf könnte sich daran nicht anpassen.

            Mit passendem CSS kannst Du hier eine Menge tun. Du kannst sogar abfragen, ob der Viewport im Hoch- oder Querformat ist:

            @media (orientation:landscape) {
               /* CSS Regeln für Querformat */
            }
            

            Wiki-Hinweis: Responsives Layout

            Wenn Du eine Demo-Version deiner Seite vorzeigst (d.h. das CSS, JS und statisches HTML, ohne PHP) könnte man noch konkrete Tipps geben.

            Rolf

            --
            sumpsi - posui - obstruxi
            1. Hi,

              Es ist auch keine gute Idee, die Screen-Größe zu verwenden. Diese Daten sind nur von Bedeutung, wenn die Webseite fullscreen angezeigt wird. Zu einem Gerät mit größenveränderlichen Fenstern - was auch ein neueres Tablet sein kann! - passt diese Vorgehensweise nicht.

              Auch ein Android-Smartphone hat veränderliche Browser-Größe - etwas länger auf dem Kästchen bleiben, und der Screen wird geteilt ...

              cu,
              Andreas a/k/a MudGuard

            2. Hallo Rolf,

              für das Dreh-Problem von Smartphones/Tablets habe ich bereis ein fertiges JS-Script, dass die Bildschirmverhältnisse überprüft und das css entsprechend anpasst. Da das gesamte Projekt für ein Kampfgericht gedacht ist, erwarte ich von den Veranstaltern und auch von den Kampfrichtern, dass sie die Geräte ausschließlich für diesen Zweck verwenden. Wenn jemand auf die dumme Idee kommt, das Gerät während der Wertung mit einem Teilungsbildschirm oder anderweitig zu verwenden, hat die Person es auch ein wenig verdient, dass die Darstellung darunter leidet.

              Deine CSS-Tipps sind einfach klasse! Ich werde mich mal intensiv mit Media Queries befassen, sie scheinen ja eine Komplettlösung für fast alle meine Probleme zu bieten. Ich komme leider nicht dazu, hinter allen Neuerungen her zu sein; meist schaue ich nur nach, wenn ich ein Problem habe. Aber auch dann, fehlt mir leider oft die Zeit.

              Aktuell braucht mich das reale Leben mehr als das virtuelle, darum bleibt die Web-Arbeit erstmal liegen. Sobald ich aber wieder mehr Zeit investieren kann und daran denke, werde ich dir mal meinen Code zukommen lassen.

              Ich danke dir wieder sehr für deine Hilfe und hoffe, dass du die kommenden heißen Tage gut überstehst.

              Bleib gesund!

              Daniel