キーボードでウェブサイトを風景にする

Question

私は面白い問題に遭遇しました。私のウェブサイトには、携帯電話用のナビゲーションバーの2つのバージョンがあります - 風景と肖像画。これらの2つを検出するために、私はCSSメディア方向を使用します。

@media (orientation: landscape) 
{ 
    /* inline menu */ 
} 

@media (orientation: portrait) 
{ 
    /* multiple rows menu */ 
} 

しかし、実際のページサイズが小さくなるため、キーボードページを横向きにすると開きます。
これを修正する方法を教えてもらえますか？私が考えることができるのは、フォーカスの入力です。そのため、人物が注視されているときはいつでも、人物画がオンになっていますが、風景でもメニューが変わります。 ここに例示的な画像があります

ありがとうございます！

Answer 1

あなたはMedia Queries W3C Recommendation

をチェックする場合は、この興味深い文見つける： 「高さ」メディア機能の値がより大きいかであるとき '方向のメディア機能は「ポートレート」です

を'width'メディア機能の値と同じです。それ以外の場合、 'orientation'は 'landscape'です。

キーボードを開くと、ページは横向きモードに変わります。

この問題を解決するには複数の方法があります。 チェックthisに回答できます。

Answer 2

あなたは完全に高さ/向きを無視する必要があります。このようなもの：

@media (max-width: 480px) 
{ 
    /* inline menu */ 
} 

@media (min-width: 481px) 
{ 
    /* multiple rows menu */ 
}