私はレスポンシブ Web デザイン用の Javascript/JQuery プラグインを開発しています。このプラグインには、ビューポートの変更、特にサイズ変更と方向を監視する機能があります。変更が検出されると、対応するコールバック関数が呼び出されます。
しかし、Android (具体的には Google Galaxy Nexus の標準ブラウザを使用) では、ユーザーがソフト キーボードを使用しようとすると、ビューポートのサイズが変更され、コールバック関数が起動されることに気付きました。この動作を排除したいです。
Javascript 経由でこの動作を無効にしたり検出したりして、コード ベースを変更して対応できるようにする方法はありますか?
これまで見てきた解決策は主に Android アプリ開発に関係しており、私のケースに当てはまるかどうかはわかりません。
ありがとう。
ベストアンサー1
さて、少しいじってみた結果、問題の解決策を見つけました。
では、ソフト キーボードが表示/非表示になると何が起こるでしょうか? 私のテストでは、 はviewport width
一定のままです。ただし、ソフト キーボードが(縦向き) と (横向き) で表示されるとviewport height
、 のサイズ [ ] が変わります。また、ソフト キーボードが(縦向き) と(横向き)で非表示になると、 のサイズが変わります。((current - previous)/previous)*100
43%
58%
73%
139%
そこで私が行ったのは、以下の条件がすべて当てはまる場合にコールバック関数を無効にすることでした。
- デバイスはモバイルです
- ビューポート幅の変化率は1%未満です
- ビューポートの高さの変化率が35%を超えています
モバイル デバイスのブラウザーにはデスクトップのようなサイズ変更ハンドルがないため、ユーザーが上記の条件を自然に模倣する状況は発生しないと思います。
コードのサンプルはここで見ることができます:https://github.com/obihill/restive.js/blob/f051fe6611e0d977e1c24c721e5ad5cb61b72c1c/src/restive.js#L4419残念ながら、これはより大きなコードセットの一部ですが、条件に基づいて基本的な考え方を理解できるはずです。
乾杯。