3

投稿のタイトルにあるように、すべてのWebkitブラウザーでデバイスの向きを横向きから縦向きに変更すると、x軸のオーバーフローに問題があります。試したのは、iOSおよびAndroid駆動のデバイス[iPhone 4、4S、5、Samsung Galaxy Nexus、Samsung Galaxy IIおよびIIIは、GoogleChromeまたはSafariのいずれかを使用しているときに問題を引き起こした電話]。

私はこのタグを私のウェブページの頭に置きました：

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

また、メディアクエリを使用していることも明記する必要があります。

@media (min-width: 1200px)

...

@media (min-width: 980px)

...

@media (min-width: 768px) and (max-width: 979px)

...

@media (max-width: 767px)

...

@media (max-width: 480px)

...

だから私は誰かがこの問題に遭遇したかどうか、そしてあなたがそれに対する解決策を持っているかどうか疑問に思っていました、なぜならそれは本当に迷惑だからです。

何が起こっているのかをより正確に言うと、私はTwitterブートストラップフレームワークに基づいて構築されたモバイルWebアプリケーションを持っており、モバイルデバイスとパッドでものみ表示できます。したがって、Webアプリを表示している画面サイズに応じてレイアウトを変更するには、明らかにメディアクエリを使用する必要があります。そして、私が得る問題は、縦向きモードでページを表示しているときに、デバイスの向きを横向きに変更してから縦向きに戻すと、最初に着陸したときでも、コンテンツがデバイスの幅よりも大きくなることです。ポートレートモードのWebアプリページでは、レイアウトはデバイスの画面幅と同じ幅であるため、ランドスケープに戻ってポートレートに戻った後でないとわかりません。これが十分な説明であることを願っています（：

4

2 に答える 2

1

作成しているページにも同じバグがありました。ページを最小化した後、最終的にプレースホルダーまで追跡しました。

<input placeholder="foo">

このバグは、横向きモードで入力の幅が縦向きの幅よりも広くなる場合に発生します。

input {
  width 95%;
}

表示されているバグがプレースホルダーによっても発生している場合は、入力の親要素に非表示になっている単純なoverflow-x：が修正として機能しました。

横向きから縦向きへのiOS6でのテキスト入力のプレースホルダー属性のworkarondに関するいくつかの議論があります

于 2013-05-10T10:38:35.510 に答える
-1

あなたは試すことができます

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

編集
わかりました、私は通常、そのメタ名を以下のようなメディアクエリと組み合わせてオリエンテーションを組み合わせて問題なく使用します

@media screen and (min-width: 480px) and (orientation:portrait) {

}
于 2012-10-31T14:03:01.900 に答える