1

タッチ コントロールに jQuery と hammer.js を使用するモバイル Web アプリを構築しています。Hammer.js には、Safari のスクロール/ズーム/ほぼすべてをオフにする「prevent_default」という機能があります。テキスト フィールドに < input > を使用するフォームと、フォームをタップすると .focus() を呼び出す JavaScript リスナーを含むページがあります。

これは、ある時点まではすべてうまく機能します。ページは所定の位置に固定され、非常にきれいに見えます。フォーム フィールドをクリックするとズームインし、iOS キーボードが表示されます。問題は、ユーザーがテキストの入力を完了すると、ズームアウトする方法がないことです。ブラウザは .focus() からズームインされすぎているため、ブラウザ バーが表示されなくなり、ブラウザ タブを閉じて、更新する代わりに URL を再入力する必要があります。

ブラウザを強制的にズームアウトして最初のビューに戻す方法を探しています。私はいくつかの解決策を求めてインターネット全体を見てきましたが、まだ何も見つけていません。

最初からズームを無効にするヘッダーにビューポート メタ タグがありますが、この問題の解決には役に立ちません。

4

1 に答える 1

0

ビューポートの属性を変更した後、入力フィールドに焦点を合わせてぼかします。

function refreshViewportZoom(){
  var viewport = document.querySelector("meta[name=viewport]");
  viewport.setAttribute('content', 'initial-scale=0.5, maximum-scale=0.5, scale=0.5, user-zoom=0.5, zoom=0.5');
  document.getElementById('myInputField').focus();
  setTimeout(blurLater,2000);
}

function blurLater(){
  document.getElementById('myInputField').blur();
}

Safari は先を見越してそれ以外のblurLater場合は無視するように見えるため、関数として が必要です。

于 2012-10-24T23:52:09.527 に答える