Android keyboard does not open when using media queries
I have a mobile site that includes a search box at the bottom. I also use media queries to hide content in portrait mode and display it in landscape mode.
However in Android devices when I click on the search field the keyboard opens then immediately closes, making it impossible to type in the box.
This is not a problem in iOS.
The page can be viewed here - http://so.ajcw.com/android-keyboard.htm and here is the full page code:
<!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=开发者_如何学Go"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>
Thing's I've tried
If I have only one venue or if I move the search up the page the problem goes away (this isn't a solution, just an observation).
I have tried changing the DOCTYPE - an HTML5 doctype slightly changes the functionality in that the keyboard remains after the second click, but again it doesn't fix the issue.
*edit*
- This does seem to be browser specific. An old Android phone does not have the problem, nor it seems does my Android's (HTC Desire) default browser, but it does happen in Dolphin HD.
This is not a solution, but a little telling I think. When I added float:left and position:relative I get the behavior you describe when changing the doc-type. On the second click when the keyboard does show up the landscape items show up too. Seems like a hiccup in the orientation: landscape for android.
.address {display:none}
@media only screen and (orientation: landscape) {
.address {color:red;display:block;float:left;position:relative}
}
Given the vast difference in screen sizes these days. I'd suggest moving away from using orientation and instead use max and min widths.
UPDATE: Ok I think I confirmed that at least on my Motorola Triumph in the android browser, orientation:landscape is not fully supported. I used the following and clicking the text box in portrait view triggered the landscape styles to display...
@media only screen and (orientation: landscape) {
BODY {background:pink}
}
Using Adam's research the issue is solved by avoiding using orientation. The solution that works for me is taken from this CSS3 'boilerplate', and uses min and max widths like so:
@media only screen and (max-width: 320px) {
.address { display: none; }
}
@media only screen and (min-width: 321px) {
.address { display: block; }
}
This can be seen in action here - http://so.ajcw.com/android-keyboard-solved.htm (http://goo.gl/nNIm9)
However this solution is not ideal as using fixed dimensions will eventually break as devices resolutions change.
加载中,请稍侯......
精彩评论