CSS Ориентация ландшафтных проблем android

Question

Когда я фокусирую поле ввода на своем веб-сайте в мобильной клавиатуре Android, открывается код запросов ландшафтного мультимедиа, применяемый к элементам 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. Detect Orientation Change

Answer 3

Вы не можете использовать ориентацию: пейзаж в медиа-запросах, так как Android разбивает их.

Когда появляется клавиатура, она меняет ориентацию от портрета к пейзажу. Это также произошло на iPhone в iOS7, но я считаю, что теперь исправлено.