使用媒体查询时无法打开 Android 键盘答案

【问题标题】：Android keyboard does not open when using media queries使用媒体查询时无法打开 Android 键盘
【发布时间】：2011-11-22 17:52:55
【问题描述】：

我有一个底部包含搜索框的移动网站。我还使用媒体查询以纵向模式隐藏内容并以横向模式显示。

但是在 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 doctype 略有变化键盘在第二个之后保留的功能点击，但同样不能解决问题。

*编辑*

这似乎是特定于浏览器的。旧的 Android 手机没有问题，我的 Android (HTC Desire) 默认浏览器似乎也没有，但在 Dolphin HD 中确实发生了。

【问题讨论】：

这发生在我的摩托罗拉 Triumph 上。

标签： android css textinput android-softkeyboard media-queries

【解决方案1】：

这不是一个解决方案，但我认为有点说明问题。当我添加 float:left 和 position:relative 时，我得到了您在更改文档类型时描述的行为。在第二次点击时，当键盘出现时，横向项目也会出现。似乎在方向上打了个嗝：android 的横向。

.address {display:none}

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

鉴于当今屏幕尺寸的巨大差异。我建议不要使用方向，而是使用最大和最小宽度。

更新： 好的，我想我至少在我的摩托罗拉 Triumph 中的 android 浏览器中，没有完全支持方向：横向。我使用以下内容并单击纵向视图中的文本框触发横向样式显示...

@media only screen and (orientation: landscape) { 
  BODY {background:pink}
}

【讨论】：

我最好的猜测是，无论出于何种原因，当屏幕键盘打开时，android 浏览器都认为它处于横向模式。
感谢 Adam - 您认为未完全支持方向：横向的假设让我找到了另一个解决方案。

【解决方案2】：

使用Adam's research 可以通过避免使用方向来解决问题。适合我的解决方案取自 this CSS3 'boilerplate'，并使用如下所示的最小和最大宽度：

@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)

但是，此解决方案并不理想，因为使用固定尺寸最终会随着设备分辨率的变化而中断。

【讨论】：