web-dev-qa-db-ja.com

Androidソフトキーボードがアクティブな場合、Webページのビューポートサイズ変更を防止する

レスポンシブウェブデザイン用のJavascript/JQueryプラグインを開発しています。ビューポートの変更、特にサイズ変更と向きを監視する機能があります。変更が検出されると、対応するコールバック関数が呼び出されます。

ただし、Android（特に、Google Galaxy Nexusのストックブラウザを使用）で、ユーザーがソフトキーボードを使用しようとすると、ビューポートのサイズが変更され、コールバック関数が起動することに気付きました。 。これは私が排除したい動作です。

Javascriptを介して、この動作を無効にするか、検出して、コードベースに変更を加えて対応できるようにする方法はありますか？！

私がこれまで見てきた解決策は、主にAndroidアプリ開発であり、私の場合に当てはまるかどうかはわかりません。

ありがとう。

javascriptjqueryandroid-softkeyboard
21
Obinwanne Hill

さて、いじくり回した後、私は自分の問題の解決策を見つけました。

では、ソフトキーボードが表示/非表示になるとどうなりますか？！私のテストでは、viewport widthは一定のままです。ただし、ソフトキーボードがviewport height（縦向き）および((current - previous)/previous)*100（横向き）で表示されると、43%はサイズ[58%]を変更します。ソフトキーボードがそれぞれ73%（縦向き）と139%（横向き）で非表示になっている場合。

したがって、次の条件がすべて当てはまる場合は、コールバック関数を無効にしました。

  1. デバイスはモバイルです
  2. ビューポート幅の変化率は1％未満です
  3. ビューポートの高さの変化率が35％を超えている

モバイルデバイスのブラウザにはデスクトップのようなサイズ変更ハンドルがないため、ユーザーが上記の条件を自然に模倣する状況が発生するとは思われません。

ここでコードのサンプルを見ることができます： https://github.com/obihill/restive.js/blob/f051fe6611e0d977e1c24c721e5ad5cb61b72c1c/src/restive.js#L4419 。残念ながら、これはより大きなコードセットの一部ですが、条件に基づいて基本的な考え方を収集できるはずです。

乾杯。

4
Obinwanne Hill

私も同様の問題を抱えていました。そして、私の解決策は、Android：Pで最も期待しないときにトリガーされるサイズ変更イベントの代わりに方向変更イベントを使用することでした

$(window).bind( 'orientationchange', function(e){ // Type pretty code here });

ソース： http://www.andreasnorman.com/dealing-androids-constant-browser-resizing/

1
Andreas Norman

私のpretty codeとあなたを共有することができます。 resizeイベントにトリガーを設定し、サイズ変更イベントの前と比較して高さをカウントしていました。

originalHeight * 100 / currentHeight高さコンテナを変更できる割合を示します

ここでコードのサンプルを見ることができます https://jsfiddle.net/ocg9Lus7/

更新19.11.2018

オンロードウィンドウの後で、値を動的（100％、vhなど）から静的な値に変更することをお勧めします。より動的なコンテナが必要な場合は、関数をresizeイベント（originalHeight * 100 / currentHeight）にバインドすることでサイズを再計算できます。

ここでコードのサンプルを見ることができます： https://jsfiddle.net/gbmo6uLp/

0
Daniel Karski