AndroidキーボードでCSSのユニットvhを使用してビューポートと要素を縮小する

Question

非常に奇妙でユニークな問題が発生しています。

すべてのページでは、プロジェクトの性質上、pxではなくvhとvwのCSSユニットが使用されています。

問題：Androidタブレットで、入力フィールドをタッチすると、デフォルトのキーボードがページを引き起こしているビューポートとページ内のすべての要素を縮小します。

ipadでは、キーボードが画面に重なって画面をプッシュしないため、この問題はありません。

ブラウザのビューポートを押して元のサイズを保持しないようにAndroidキーボードを避けるための解決策をお探しください。

注：私が残した唯一のオプションは、キーボードがビューポートを押さないようにすることです。CSS単位を変更したり、xml、manifestを使用することはできません。これらは、この問題が発生しているWebページです。

Answer 1

同じ問題が私のストライドから私を奪った。問題を解決するために私はcssの解決策または回避策を見つけられません。

しかし、JQuery（またはほぼJavaScript）を使用できる場合は、解決するために使用できるコードがあります。

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); 

これは単なる例であり、必要なパーセンテージのjQuery識別子を使用できます。

PD：情報のヒントが1つあります。あなたのhtmlまたは内側の最後にコードを入れてください。$（document）.ready（function（）{}）;、レスポンシブデザインが必要な場合はorientationchangeイベント内に配置します。こちらです。

$(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);}); 

オリエンテーションチェンジを行うデバイスの遅延のため、上記の450msタイマーを設定しました。

私の英語、 歓声のために申し訳ありません

Answer 2

私は最近、同じ問題に直面し、それは素晴らしい解決策を見つけるために私に時間がかかりました。 私はhtml5、css3、およびangularjsを使用してコードバアプリを設計しています。しかし、さらに、私はアプリがすべての画面にフィットするようにしたい。私はビューポートとvhで始まりましたが、キーボードはeveythingを壊しました。今あなたは、「REM」あなたは「VHを使用しているとまったく同じ方法を使用することができ、

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

ここに行く：

だから、あなたが使用する必要があり、このようなほんの少しのJavaScript（ここではjQueryのである）であります"ただし、ビューポートはフォントサイズに影響しません。 "Rem"はhtmlのルートフォントサイズでのみ設定され、jqueryでスクリーンの高さの1％に設定します。

願っています。

編集1： 私はちょうど新しい問題に直面したので、私はここで解決策を提示します。ほとんどの場合、スマートフォンにはフォントサイズの最小限の制限があります。 あなたのすべての値を変更し、3または4で除算する必要があります。 はその後、あなたがJavaScriptを変更する必要があります。

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

あなたがSASSを使用している場合、あなたはあなたのための除算を行いますREM関数を作成することができますさらに簡単です。

Answer 3

これは古い質問ですが、アプリではまったく同じ問題がありました。私が見つけた解決策はかなり簡単でした。これは、ビューポートのメタを強制

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); 

（私のアプリは角度でそう、私はapp.componentのngOnInit機能でこれを置くが、document.ready()またはその他の「初期設定の完全な」コールバックが適切な実験でうまく動作するはずです） Androidのソフトキーボードを開いたときに

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

をハードコーディングすると、デバイス幅とデバイスの高さが変化するので動作しないのに対し、明示的に、ビューポートの高さを設定します。