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

我有一个包含底部搜索框的移动网站。我还使用媒体查询在纵向模式中隐藏内容并以横向模式显示。使用媒体查询时Android键盘无法打开

但是，在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中。

来源

2011-09-22 ajcw

这是发生在我的摩托罗拉凯旋。 –

使用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）

但是这种解决方案并不理想，因为随着设备分辨率的改变，使用固定尺寸最终会破裂

来源

2011-10-10 09:29:18 ajcw

这不是一个解决方案，但有点告诉我想。当我添加float：left和position：relative时，我得到了更改doc类型时所描述的行为。在第二次点击时，键盘显示出景观项目也显示出来。看起来像一个方向上的呃逆：Android的风景。

.address {display:none} 

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

鉴于这些天在屏幕尺寸上的巨大差异。我建议远离使用方向，而是使用最大和最小宽度。

更新：好吧我认为我证实，至少在我的摩托罗拉凯旋在android浏览器，方向：景观不完全支持。我用下面，然后点击在纵向视图中的文本框中触发的景观风格，显示...

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

来源

2011-10-03 19:09:23

我最好的猜测是，无论出于何种原因，当浏览器键盘打开时，android浏览器认为它处于横向模式。 –

感谢亚当 - 你的假设：方向：景观没有得到充分的支持导致我找到另一种解决方案。 – ajcw

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

回答

相关问题