CSSオリエンテーションランドスケープ問題android

Question

アンドロイドモバイルキーパッドで自分のウェブサイトに入力フィールドをフォーカスすると、html要素に適用されるランドスケープメディアクエリコードが表示されます。私はキーパッドを開いた状態で肖像画を見る。

@media screen and (min-width: 320px) and (max-width: 1023px) and (orientation: landscape) { ... } 

のように私のメディアクエリ私は、ユーザーが「私たちは景観ビューをサポートしていない」風景モードでウェブサイトを閲覧するメッセージを表示しなければなりません。そのためのCSSソリューションです。

demo link here

html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:after, 
 
*:before { 
 
    box-sizing: inherit; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
.content { 
 
    background: red; 
 
    height: 100%; 
 
} 
 
p { 
 
    color: white; 
 
    text-align: center; 
 
    padding: 10px; 
 
    font-size: 16px; 
 
    font-family: sans-serif; 
 
} 
 
input { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 30px; 
 
    background-color: #eee; 
 
} 
 

 
/* Landscape */ 
 
@media screen and (min-width: 320px) and (max-width: 1023px) and (orientation: landscape) { 
 
\t .content { 
 
\t background-color: orange; 
 
\t position: relative; 
 
\t &:before { 
 
\t \t content: ''; 
 
\t \t 
 
\t } 
 
\t } 
 
}

<div class="content"> 
 
    <p>Focus on input in android mobile, keypad opens. Lanscape media query working in portrait view with keypad opens. Any CSS solution for it.</p> 
 
    <input type="text" /> 
 
</div>

感謝。

Answer 1

コードを確認し、ランドスケープで正常に動作します。 今、あなたの質問は何ですか？

Answer 2

CSSの使用では、テキストのブロックを非表示にして、それを横向きモードで表示することで実現できます。 Here is the jsfiddle.

HTML：

<div class="content"> 
    <p>Focus on input in android mobile, keypad opens. Lanscape media query working in portrait view with keypad opens. Any CSS solution for it.</p> 
    <input type="text" /> 

    <div class="for-landscape"> 
    we are not supporting landscape view. 
    </div> 
</div> 

CSS：

html { 
    box-sizing: border-box; 
} 
*, 
*:after, 
*:before { 
    box-sizing: inherit; 
} 
* { 
    margin: 0; 
    padding: 0; 
} 
html, 
body { 
    height: 100%; 
} 
.content { 
    background: red; 
    height: 100%; 
} 
p { 
    color: white; 
    text-align: center; 
    padding: 10px; 
    font-size: 16px; 
    font-family: sans-serif; 
} 
input { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width: 100%; 
    height: 30px; 
    background-color: #eee; 
} 
.for-landscape{ 
    display:none; 
} 
/* Landscape */ 
@media screen and (min-width: 320px) and (max-width: 1023px) and (orientation: landscape) { 
    .content { 
     background-color: orange; 
     position: relative; 
     z-index: 0; 
     &:before { 
     content: 'We are not supporting landscape mode view. Please rotate your device to portrait.'; 
     position: absolute; 
     z-index: 9; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     background-color: #fff; 
     padding: 10px; 
     color: red; 
     text-align: center; 
     } 
    } 
    p{display:none;} 
    .for-landscape{display:block;} 
} 

あなたはまた、それを達成するためにjavascriptを使用することができます。画面自体の向きを検出し、内容にテキストブロックを追加することで以下は、javascriptを使用して方向変更を検出するためのリファレンスです。

Answer 3

Androidのように、メディアクエリで方向：ランドスケープを使用することはできません。

キーボードが表示されたら、向きが縦向きから横向きに変わります。これはiOS7のiPhoneでも発生しましたが、今は修正されていると思います。