Dealing with Android’s constant browser resizing

Google Chrome on Android triggers the window.resize event quite often and when you least expect it.

When dealing with responsive design there are a lot of traps to fall into and make your life a living hell. One of them we discovered today.

We had some functions we wanted to trigger when the orientation changed in the browser, and one way to deal with that was to use the resize event that triggers.

$(window).resize(function() {
// Pretty code here
An Android soft keyboard

The problem with that way, we discovered was that when the  soft keyboard appears on an Android device, it also triggers the resize event. It doesn’t do that on iOS though. This happens because the soft keyboard isn’t and overlay on top of the browser like in iOS, it actually pushes up from underneath and resizes the browser, triggering the resize event.

My personal opinion on this, is that it’s immensely stupid, but that doesn’t change the fact that it triggers the resize event a lot more than we want. After some Googling we found that there is in fact an orientation change event that we can bind to the window, and this only triggers on orientation changes, luckily.

$(window).bind( 'orientationchange', function(e){
// Pretty code here

In retrospect it would seem more logical to use the orientation change event from the beginning in this case. But I still cannot let go the fact that Android resizes the browser window when it shouldn’t need to.

Thoughts and comments

  1. I’m in full support of Chrome’s Keyboard resizing window. This makes it easy to handle keyboards of any size. You just have to adapt to it. Not everyone has an iPhone with a single-sized keyboard who’s value you can hard code.

    1. The difference is that on Android the keyboard resizes the browser. On iOS the keyboard lays on top of the browser.

      Both options can support any sized keyboard, but the Android solutions messes with the browser, thus triggering javascript events.

  2. Andreas, THANK YOU a lot!
    I’ve spent a lot of time to find out what’s happens on one of my sites, until found your post.

    I think behavior (events) while opening keyboard must be that same on all devices, but when on some devices it resizes window, but on others – no, – it makes responsive developing a hell.
    First association with this situation is when I made fixes for IE 11…

Share your thoughts on this

Your email address will not be published.