phonegap(cordova) を使用して新しい iPhone アプリを作成しています。アプリで 1 つの問題がありました。誰かの入力フィールドをクリックすると、iPhone キーボードがポップアップし、ページ全体の位置が変化していました。固定フッターのように、キーボードの上にポップアップ表示されます。ガイドしてください。
ありがとうございました
phonegap(cordova) を使用して新しい iPhone アプリを作成しています。アプリで 1 つの問題がありました。誰かの入力フィールドをクリックすると、iPhone キーボードがポップアップし、ページ全体の位置が変化していました。固定フッターのように、キーボードの上にポップアップ表示されます。ガイドしてください。
ありがとうございました
これは「正しく」理解するのが難しい問題です。入力要素のフォーカスでフッターを非表示にし、ぼかしで表示することはできますが、iOS では常に信頼できるとは限りません。ときどき (たとえば、私の iPhone 4S では 10 分の 1 の頻度で) フォーカス イベントが発生しない (または競合状態がある可能性がある) ように見え、フッターが非表示になりません。
多くの試行錯誤の後、私はこの興味深い解決策を思いつきました:
<head>
...various JS and CSS imports...
<script type="text/javascript">
document.write( '<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
</script>
</head>
基本的には、JavaScript を使用してデバイスのウィンドウの高さを決定し、CSS メディア クエリを動的に作成して、ウィンドウの高さが 10 ピクセル縮小したときにフッターを非表示にします。キーボードを開くとブラウザーの表示サイズが変更されるため、iOS ではこれが失敗することはありません。JavaScript ではなく CSS エンジンを使用しているため、はるかに高速でスムーズです。
注: 「visibility:hidden」を使用すると、「display:none」または「position:static」よりもグリッチが少ないことがわかりましたが、マイレージは異なる場合があります。