2013-06-19 22 views
18

レスポンシブウェブデザイン用のJavascript/JQueryプラグインを開発しています。ビューポートに変更、特にサイズ変更と方向変更を監視する機能があります。変更が検出されると、対応するコールバック関数が呼び出されます。アンドロイドソフトキーボードがアクティブな場合、ウェブページのビューポートのサイズ変更を防止する

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

Javascript経由でこの動作を無効にするか、それを検出する方法がありますか?そのため、コードベースに変更を加えて対応できますか?

私が今までに見たソリューションは、主にAndroid App Developmentで行う必要があり、私のケースではそれが当てはまるかどうかはわかりません。

ありがとうございました。

答えて

5

私が問題を解決する方法を見つけたので、

ソフトキーボードの表示/非表示はどうなりますか?私のテストでは、viewport widthは一定のままです。しかし、viewport heightは、ソフトキーボードが43%(肖像画)と58%(ランドスケープ)で表示されているときにサイズが変更された[((current - previous)/previous)*100]。ソフトキーボードが73%(肖像画)と139%(ランドスケープ)のそれぞれで隠されているときに表示されます。私がしたので、何

は、以下の条件にすべて該当するコールバック関数を無効にしました:

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

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

コードのサンプルはhttps://github.com/obihill/restive.js/blob/master/restive.js#L4403です。残念ながら、それはより大きいコードセットの一部ですが、条件に基づいて基本的なアイデアを集めることができるはずです。

乾杯。

+7

、あなたのコードを共有することはできますか? – naturallyfoster

+0

人はさまざまなサイズのカスタムキーボードをインストールできるので、これは100%信頼できるものではありません(ほとんどの場合は問題ありません)。おそらくAndreas Normanのソリューションを混ぜるのでしょうか?モバイルブラウザの場合は、方向の変化に耳を傾けます。それ以外の場合は、サイズ変更を聞きます。 – Job

2

私にも同様の問題がありました。そして、私の解決策は、少なくともあなたがAndroid上でそれを期待するときトリガresizeイベントの代わりに姿勢変更イベントを使用していた:P

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

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

+0

ありがとうございます。それは多くの意味があります。しかし、そのイベントタイプはJQuery Mobileのみたいですね! –

+0

申し訳ありませんが、jQueryが必要だと言いました。しかし、正常に動作するにはjQueryしか必要ありません:) –

+0

ああ!私はそれを撃つだろう。ありがとう。 –

関連する問題