3

Web サイトのモバイル バージョンを開発していますが、デバイス (iPhone) を回転させると奇妙な動作が発生します。横向きに回転すると見た目も動作も問題ありませんが、縦向きに戻すと、コンテンツは調整されますが、ビューポートは横向きのサイズのままになります。ページの幅が 100% に設定されているログイン入力フィールドが 2 つあるため、回転時に幅に合わせて拡大できます。

input {
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 18px 10px;
}

これらの入力要素は、自動に変更すると回転が適切に動作するため、問題の一部のようです。フォームフィールドの流動的な幅をそのまま維持するだけでなく、この動作を修正する方法を知っている人はいますか?

参考までに、ビューポートは、固定されたスケーリングされたデザインを可能にするために次のように設定されています。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

解決策について StackOverflow を徹底的に調べましたが、メタ ビューポート属性の変更、javascript の使用、CSS でのメディア クエリの変更など、他の投稿の解決策はどれも機能しません。どんな助けでも大歓迎です。

4

1 に答える 1

0

親 div 内に入力を含め、親 div の CSS ルールを作成しますoverflow: hidden;。

以下で作成したフィドルを見て（もちろんiPhoneで）、うまくいくかどうか教えてください！

http://jsfiddle.net/g54pm/3/

于 2013-06-03T09:01:19.283 に答える