Tag Archives: mobile

Android browsers, keyboards, and media queries

If you have a site that is intended to be mobile friendly, is reasonably responsive (in a media-query-stylee) and has user input areas, you may find this issue on Android due to how the keyboard interacts with the screen:

Nice text input area

portrait_text_entry

Oh noes! Screen gone wrong!

confused_orientation_text_entry

It turns out that on Android devices the keyboard doesn’t overlay the screen, but actually resizes the screen; this can cause your media queries to kick in, especially if you use “orientation”:

[css]
(orientation : landscape)
[/css]

[css]
(orientation : portrait)
[/css]

To fix this, try changing your orientation checks to aspect ratio checks instead:

swap
[css](orientation : landscape)[/css]
for
[css] (min-aspect-ratio: 13/9) [/css]

and
[css](orientation : portrait)[/css]
for
[css](max-aspect-ratio: 13/9)[/css]

Ahhh – success!

corrected_text_entry

Reference http://abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/

Mobile website input box outlines: DESTROY!

Something that took me a while to figure out:

chrome_input_focus_border

The orange border around this input box only appears on focus, on mobile devices. It took a while longer to notice that it’s only on mobile Chrome too.

I understand that it’s a valuable inclusion for small screens where you’d like to know where your cursor or other input is actually being passed to, but if you wanted something other than the orange border, or to remove it entirely, trawling through your css for any reference to “border” or orange-y hex values can be a pain.

All you need to do is – for the element in question:

[css]
:focus {outline:none;}
[/css]

Annnnnd relax.

#velocityconf notes part 3: network performance amazingness

An absolutely brain melting session from Ilya Grigorik , talking about the intricacies of tcp, http (0.9-1.1-2.0), the speed of light, how the internet  instructure works, how mobile network browsing works, how http 1.1 doesn’t support the current use cases, and most fascinating for me: what mobile browsers actually do under the hood.

Amazing how an analytics beacon on a webpage or app could cause your entire battery to be zapped in a matter of hours.

It’s going to take me a few days to decompress this information in my fuzzy brain, so why not check the slides yourself here: http://bit.ly/hpbn-talk