Клавиатура Android не открывается при использовании медиазапросов - PullRequest
Новая
       26

Клавиатура Android не открывается при использовании медиазапросов

5 голосов
/ 22 сентября 2011

У меня есть мобильный сайт с окном поиска внизу. Я также использую медиазапросы, чтобы скрыть содержимое в портретном режиме и отобразить его в альбомном режиме.

Однако в устройствах Android, когда я нажимаю на поле поиска , клавиатура открывается, затем сразу закрывается , что делает невозможным ввод в поле.

Это не проблема в iOS.

Страницу можно посмотреть здесь - http://so.ajcw.com/android-keyboard.htm, а вот полный код страницы: 

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <title>Erroring search field</title>

    <style>     
    .address { display: none; }

    @media only screen and (orientation: landscape) { 
        .address { display: block; }
    } 
    </style>

</head><body>

<h3>Venue 1</h3>
<p>Cuisine</p>
<p>Price</p>
<p>Rating</p>
<p class="address">Address</p>

<h3>Venue 2</h3>
<p>Cuisine</p>
<p>Price</p>
<p>Rating</p>
<p class="address">Address</p>

<form><input type="text"></form>

</body></html>

То, что я пробовал

  • Если у меня есть только одно место или если я перейду к поиску вверх по странице, проблема исчезает (это не решение, а просто наблюдение).

  • Я попытался изменить DOCTYPE - HTML5-тип документа слегка изменяется функциональность в том, что клавиатура остается после второго нажмите, но снова это не решает проблему.

* редактировать *

  • Это похоже на браузер. Старый телефон Android не имеет проблемы, как и браузер по умолчанию для моего Android (HTC Desire), но это происходит в Dolphin HD.

Ответы [ 2 ]

2 голосов
/ 03 октября 2011

Это не решение, но я думаю, что это немного говорит.Когда я добавил float: left и position: относительный, я получаю поведение, которое вы описываете при смене типа документа.На втором щелчке, когда клавиатура появляется, также отображаются элементы ландшафта.Похоже, сбой в ориентации: пейзаж для Android.

.address {display:none}

@media only screen and (orientation: landscape) { 
    .address {color:red;display:block;float:left;position:relative}
}

Учитывая огромную разницу в размерах экрана в наши дни.Я бы предложил отойти от использования ориентации и вместо этого использовать максимальную и минимальную ширину.

ОБНОВЛЕНИЕ: Хорошо, я думаю, что подтвердил это, по крайней мере, на моем Motorola Triumph в браузере Android, ориентация:пейзаж не полностью поддерживается.Я использовал следующее и, щелкнув по текстовому полю в книжной ориентации, запустил стили ландшафта, чтобы отобразить ...

1 голос
/ 10 октября 2011

Используя Исследование Адама проблема решается путем отказа от ориентации.Решение, которое работает для меня, взято из этого CSS3 «шаблона» и использует минимальную и максимальную ширину, например, так: 

@media only screen and (max-width: 320px) {
   .address { display: none; }
}

@media only screen and (min-width: 321px) { 
    .address { display: block; }
}

Это можно увидеть в действии здесь - http://so.ajcw.com/android-keyboard-solved.htm (http://goo.gl/nNIm9)

Однако это решение не является идеальным, так как использование фиксированных размеров в конечном итоге нарушается при изменении разрешения устройств.

...