これは、Sencha Touch アプリでテキストフィールドがフォーカスされているときに発生する問題です。
テキストフィールドは、何らかの理由で垂直方向と水平方向に中央に配置されているようです。
これは、それがどのように見えるべきかです
誰かがすでに同じ問題を抱えていて、それを解決しましたか?
アップデート
常に発生するわけではありませんが、元々水平方向に中央揃えされていないテキストフィールドで発生します。
Androidでも時々発生します(Chrome 26)
これは、Sencha Touch アプリでテキストフィールドがフォーカスされているときに発生する問題です。
テキストフィールドは、何らかの理由で垂直方向と水平方向に中央に配置されているようです。
これは、それがどのように見えるべきかです
誰かがすでに同じ問題を抱えていて、それを解決しましたか?
アップデート
常に発生するわけではありませんが、元々水平方向に中央揃えされていないテキストフィールドで発生します。
Androidでも時々発生します(Chrome 26)
実際には<div>
、index.html に含める必要があるのは Facebook であり、アプリのリクエスト中にこの問題が発生していました。@rdouganが言ったように、それは画面よりも大きかったため、フィールドは水平方向と垂直方向の中央に配置されました.
この問題を解決する<div>
には、アプリ リクエストが送信された後に Facebook を非表示にし、必要なときに表示します。
あなたが見ているのは (少なくともスクリーンショットから) iOS の Safari の入力ボックスの自動ズーム機能だと思います。この「現象」は、入力フォーカスを取得すると、入力ボックスを自動的に中央揃え/フォーカスします。
この<meta />
タグは、次のことを防ぐのに役立ちます。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
上記のこの<meta />
タグが達成することは次のとおりです。
1:1
ます。1
(本質的にunscalable ) に修正します。ページが確実にモバイル デバイス向けに最適化されている場合、上記のソリューションは問題なく機能するはずです。
または、これが発生するコントロールを制御したい場合は<input />
、次を使用します。
<meta name="viewport" content="width=device-width" />
次に、各<input />
のfont-size
スタイルを少なくとも16 ピクセルに設定します。
<input type="text" style="font-size: 16px;" />
このよりコンパクトな<meta />
タグは、ページを最初に一定の1:1
縮尺で表示する必要があることを示しています。
ここにテスト ページ(短縮: http://bit.ly/15GbxJa ) があり、(できれば) 修正したい内容を示します。このテスト ページでは、2 番目の (別の) 方法を使用して、よりきめ細かい制御を行っています。参考までにソースコードを見ることができます。
最初のページ表示:
自動ズームありとなしの場合: