Frage Android Keyboard verkleinert das Ansichtsfenster und die Elemente mithilfe der Einheit vh in CSS


Ich habe ein sehr seltsames und einzigartiges Problem.

Alle meine Seiten verwenden vh und vw CSS-Einheiten anstelle von px aufgrund der Art des Projekts.

Problem: Wenn Sie bei Android-Tablets das Eingabefeld berühren, verschiebt die Standardtastatur den Anzeigeport, wodurch die Seite und alle Elemente auf der Seite verkleinert werden.

Auf dem ipad existiert dieses Problem nicht, da die Tastatur den Bildschirm überlappt und nicht auf den Bildschirm drückt.

Suchen Sie nach einer Lösung, um zu vermeiden, dass die Android-Tastatur das Ansichtsfenster des Browsers verschiebt und die ursprüngliche Größe beibehält.

Hinweis: Die einzige Option, die mir bleibt, ist zu vermeiden, dass die Tastatur das Ansichtsfenster verschiebt, ich kann die CSS-Einheiten nicht ändern oder xml, manifest verwenden. Dies sind Webseiten, auf denen dieses Problem auftritt.


9
2017-10-06 06:44


Ursprung


Antworten:


Ich weiß, das ist eine alte Frage, aber ich hatte genau das gleiche Problem in meiner App. Die Lösung, die ich fand, war ziemlich einfach. (Meine App ist in Angular, also lege ich das in die App-Komponente ngOnInit Funktion, aber document.ready() oder jeder andere "Initialisierung abgeschlossen" Callback sollte gut mit dem richtigen Experimentieren funktionieren)

setTimeout(function () {
        let viewheight = $(window).height();
        let viewwidth = $(window).width();
        let viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute("content", "height=" + viewheight + "px, width=" + viewwidth + "px, initial-scale=1.0");
    }, 300);

Dies zwingt das Viewport-Meta, die Höhe des Viewports explizit festzulegen, während das Hardcoding erfolgt

<meta name="viewport" 
content="width=device-width, height=device-height, initial-scale=1">

funktioniert nicht, da sich die Gerätebreite und die Gerätehöhe ändern, wenn die Soft-Tastatur von Android geöffnet wird.


7
2018-03-15 17:51



Ich hatte in letzter Zeit das gleiche Problem und brauchte Zeit, um eine gute Lösung zu finden. Ich entwerfe eine Cordova App mit html5, css3 und angularjs. Darüber hinaus möchte ich, dass meine App auf jeden Bildschirm passt, ohne Töne von Medienabfragen und schließlich unlesbares CSS zu schreiben. Ich habe mit Viewport und Vh angefangen, aber die Tastatur hat alles kaputt gemacht.

Also, was Sie verwenden müssen, ist nur ein wenig Javascript (hier ist Jquery) wie folgt:

$("html").css({"font-size": ($(window).height()/100)+"px"});

Jetzt können Sie "rem" genauso verwenden, wie Sie "vh" verwenden, außer dass das Ansichtsfenster die Schriftgröße nicht beeinflusst. "Rem" wird nur auf die HTML-Root-Schriftgröße gesetzt und wir setzen es einfach mit jquery auf 1% der Bildschirmhöhe.

Hoffe das wird helfen!

EDIT 1: Ich habe gerade ein neues Problem gesehen, also gebe ich hier meine Lösung. Meistens haben Smartphones eine Mindestgröße für die Schriftgröße. Sie müssen alle Ihre Rem-Wert ändern und es durch 3 oder 4 teilen. Dann müssen Sie das Javascript ändern mit:

$("html").css({"font-size": ($(window).height()/25)+"px"}); /*(this is if you divide with 4)*/

Es ist noch einfacher, wenn Sie mit SASS arbeiten, können Sie eine Rem-Funktion erstellen, die für Sie die Aufteilung übernimmt.


1
2017-10-28 20:48



In Angular 4+

import {Meta} from "@angular/platform-browser";


constructor(private metaService: Meta){}

ngOnInit() {
  this.metaService.updateTag({
  name: 'viewport',
    content: `height=${this.height}px, width=${this.width}px, initial-scale=1.0`
  },
  `name='viewport'`
);
}


0
2018-06-14 12:18



Das selbe Problem hat mich aus dem Gleichgewicht gebracht. Ich habe keine CSS-Lösung oder Workaround gefunden, um das Problem zu lösen.

Wenn Sie jedoch JQuery (oder fast JavaScript) verwenden können, habe ich etwas Code, den Sie verwenden können, um es zu lösen.

var viewportHeight = $(window).height();
var viewportWidth = $(window).width();
$('body,html').css("height",viewportHeight); //if vh used in body/html too
$('.someClass').css("height",viewportHeight*0.12);// or whatever percentage you used in vh
$('#someId').css("width",viewportWidth*0.12);

Nun, dies ist nur ein Beispiel, Sie können die prozentualen jQuery-IDs verwenden, die Sie benötigen.

PD: Es gibt einen Tipp für Ihre Informationen. Setzen Sie den Code auf das endgültige Ihrer HTML oder drinnen $ (Dokument) .ready (Funktion () {}); , und wenn Sie reaktionsfähiges Design benötigen, setzen Sie es auch innerhalb des orientationchange Ereignisses; diesen Weg.

$(window).on("orientationchange",function(event){ window.setTimeout(function(){
var viewportHeight = $(window).height();
var viewportWidth = $(window).width();
$('body,html').css("height",viewportHeight);
$('.someClass').css("height",viewportHeight*0.12);
$('.someClass').css("width",viewportWidth*0.09);
$('#someId').css("height",viewportHeight*0.1);
}}, 450);});

Ich habe einen 450ms-Timer wegen der Verzögerung der Geräte, die die Orientierung ändern, oben angegeben.

Entschuldigung für mein Englisch, Prost


-1
2017-11-10 16:36