4

いくつかのスクロール イベントをテストしていて、iOS 7 Mobile Safari でキーボードを上に上げたときに発生するスクロール イベントがあることに気付きました。これがなぜなのか、誰かが何か知っているかどうか疑問に思っていましたか？

個人的には、これはバグであり (報告しようとしていますが、現時点ではバグトラッカーにログインできません)、キーボードの上下両方でスクロール イベントをスローするか、スローしないことを選択する必要があると考えています。ビューが以前の状態に戻ったように見えるためです。

この問題を実証するために、入力ボックスをクリックしてキーボードを上に向けるとスクロール イベントが発生することを確認できるこの小さなサイトを作成しましたが、キーボード メニューで完了を押して画面を最初の位置にスクロールすると発生しません。以下のテスト URL に移動するスキャン可能な QR コードを追加しました。前もって感謝します！

テスト URL: http://lp.mydas.mobi/test/cs/scroll_issue/error.html

テスト qr:QR URL コード

4

2 に答える 2

7

先日、Phonegap アプリでこの問題に遭遇しましたが、動作は新しい Safari でも一貫しているようです。

私が知る限り、新しい Safari は、キーボードが上にあるときに Web ページに報告されたビューポートのサイズを変更します。高さが 100% のページがあり、ページの下部にナビゲーションが絶対に配置されていました。キーボードが登場すると、ナビも一緒に登場しました。厄介なことに、これにより 2 つの入力フィールドがフォーカスを失い、それらが非表示になり、ログインを完了できなくなりました!

以前は、ビューポート メタ タグでheight=device-heightを使用することを避けていました。以前の Safari はステータス バーについて何も理解していないようで、報告された device-height は常に 20 ピクセル高すぎたため、20 ピクセルのスクロールで非常に表示されていました。ページの下。

私が最終的に使用した修正は、height=device-heightを設定することでした。iOS7 には、ビューポートのサイズ変更/ナビゲーションのオーバーラップに関する問題はありませんでした。驚いたことに、ページはすべてのケースでデバイスの高さの 100% のままでした。

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">

この高さ固定の状況を iOS5 および 6 で一貫して動作させるために、デバイスの検出を少し行い、デバイスの高さ (20 ピクセル) を手動で計算し、viewport タグをリセットしました。

function iOSversion() {
  if (/iP(hone|od|ad)/.test(navigator.platform)) {
    // supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
    var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
    return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
  }
}

ver = iOSversion();

if (ver[0] >= 5 && ver[0] <= 6) {
  $('head meta[name="viewport"]').attr("content", "width=device-width, height="+(window.innerHeight-20)+", user-scalable=no")
}

私はこの解決策について少し間違っていると感じていますが、岩 (新しい Safari) と困難な場所 (古い Safari) の間で立ち往生しています。これが私の答えでした。

良い方法を見つけたら、ぜひ教えてください！幸運を ：）

于 2013-10-15T20:49:38.430 に答える
1

phonegapを使用していますか？iscoll.js で phonegap を使用している場合は、デバイスでキーボード イベントが発生したときにスクローラーを更新するだけです。

キーボード イベントのリンクは次のとおりです: キーボード イベント

キーボードを閉じると、次のコードを呼び出すだけです。

window.scrollTo(0, 0);
于 2013-10-11T14:12:56.540 に答える