3
  1. この Web ページを iOS7 のホーム画面に追加します
  2. それを開き、入力フィールドにフォーカスします (キーボードがポップアップします)。
  3. 電話が横向きモードであると認識するため、テキストが赤くなります

それを回避する方法はありますか？それともAppleのせいにするべきですか？

注: この問題は、通常の Safari ブラウジング モードではなく、アプリ モードでのみ発生します。そして、iOS6で問題なく動作しました。

コード：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">

<style>
body {
    color: blue;
}   
@media (orientation:landscape) {
    body {
        color: red;
    }
}
</style>

<body>
    <h3>this text will go red when in landscape</h3>
    <input type="text" />
</body>
4

3 に答える 3

5

これは明らかに iOS7 のバグです。私のアプリケーションでは、次のメディア クエリを使用して、オンスクリーン キーボードを開いた状態で入力フィールドにフォーカスしている場合でも、縦向きモードと横向きモードを確実に区別できることがわかりました。

@media only screen and (device-width: 768px) and (device-height: 1024px) and 
    (min-aspect-ratio: 4/3) {
  /* landscape differences here */
}

キーボードが開いているとポートレート モードでもルールがアクティブになるため、orientation: Landscape を使用できませんでした。

iPhone には別のルールが必要かもしれませんが、まだそこまで進んでいません。

于 2013-10-25T15:52:50.473 に答える
3

キーボードの向きのバグは、アプリ モードだけでなく、一部の Web ブラウザーにも影響しますが、どちらの場合でも使用できることを願っています。一部の Android デバイスにも影響があるようです。

モバイル Web ブラウザーの場合は、次のように回避しました。

@media only screen and (min-device-aspect-ratio:1/1) and 
                       (max-device-aspect-ratio:3/2)    {
 /* Landscape-to-portrait corrections here */
}

このクエリは、画面が完全な正方形または正方形に近い場合にのみ起動できるという考え方です。これは、タッチスクリーン デバイスでキーボードを上げた場合にのみ発生するシナリオです。私が使用したアスペクト比の値は 1 ～ 1.5 に変換されるため、例として、16:9 の画面のアスペクト比は 1.7777778 (16/9) であり、ターゲットにはなりません。MQ が起動したら、影響を受ける要素のスタイルを変更できます。これはバグを修正するものではなく、バグを隠すだけです。

OS にバグが含まれていない場合、このクエリは起動されないため、Apple がこれを修正した場合は、コードを変更する必要はありません。

デバイスが本当に横向きモードに反転されている場合、アスペクト比は増加するだけであり、キーボードが持ち上げられている場合はさらに増加するため、デバイスが横向きのときにバグが発生することはありません.

私の知る限り、このメディアクエリを取得する正方形/ほぼ正方形の画面を備えたデバイスはありません (執筆時点で) が、間違っている場合は修正してください.

これは、iOS7 を実行している Safari、Dolphin、および Mercury ブラウザーの iPhone 5s と、Android 4.2.1 を実行している Android One X の Chrome でテストされています (キーボードで同じバグの向きのバグが発生します)。

また、Blackberry Bold 9780 (480x360) で起動するかどうかも確認しましたが、起動しませんでした。解像度がターゲット範囲内に収まる必要があり、他のMQを正常にロードしたため、これはあまり信頼できません。おそらく、ピクセル数ではなく画面の物理サイズに基づいてアスペクト比を評価します. これは、メディア クエリが、バグが発生していない画面にバグ ソリューションを適用するインスタンスである可能性があります。

完璧ではありませんが、多くの頭痛の種から抜け出すことができました.

于 2013-11-13T03:10:52.490 に答える