使用媒体查询时无法打开 Android 键盘
Posted
技术标签:
【中文标题】使用媒体查询时无法打开 Android 键盘【英文标题】：Android keyboard does not open when using media queries 【发布时间】：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 上。 【参考方案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)
但是，此解决方案并不理想，因为使用固定尺寸最终会随着设备分辨率的变化而中断。
【讨论】：
以上是关于使用媒体查询时无法打开 Android 键盘的主要内容，如果未能解决你的问题，请参考以下文章
CSS 媒体查询 - 软键盘打破 css 方向规则 - 替代解决方案？
Css 媒体查询方向：android web 视图中的横向无法正常工作