Home/ Questions/Q 6665591
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T02:44:21+00:00

I have a mobile site that includes a search box at the bottom. I

  • 0

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="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.
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0