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

Question

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

ajc*_*jcw 5 css android textinput android-softkeyboard media-queries

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

但是在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>

Run Code Online (Sandbox Code Playgroud)

事我已经尝试过了

如果我只有一个场地,或者如果我将搜索向上移动,那么问题就会消失(这不是一个解决方案,只是观察).
我尝试更改DOCTYPE - HTML5 doctype略微更改了第二次单击后键盘保留的功能,但同样不能解决问题.

*编辑*

这看起来似乎是浏览器特定的.一个旧的Android手机没有问题,我的Android(HTC Desire)默认浏览器似乎也没有,但它确实发生在Dolphin HD中.

Answer 1

ajc*_*jcw 1

根据Adam 的研究，该问题通过避免使用方向得到解决。对我有用的解决方案取自CSS3 'boilerplate'，并使用最小和最大宽度，如下所示：

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

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

Run Code Online (Sandbox Code Playgroud)

这可以在这里看到 - http://so.ajcw.com/android-keyboard-solved.htm ( http://goo.gl/nNIm9 )

然而，这种解决方案并不理想，因为随着设备分辨率的变化，使用固定尺寸最终会被破坏。

归档时间：	14 年，11 月前
查看次数：	1084 次
最近记录：	14 年，9 月前