Virtual Keyboard hides fields/textareas/contenteditable/

i know there are already some stackoverflow threads about the problem that the virtual keyboard of mobile phones hide or overlapping input fields, textareas and so on. But all this threads were useless, i searched a lot but many talk about this problem based on android development and also some based on web development.

I focus web development. The problem is, there is NO thread where the problem was solved or any really useful answer was given/posted.

So i started this one with the hope that it will be solved now. So now what is the problem directly? If you click on a area where something can be entered, on a mobile device, you would usually expect that the website scroll up and the virtual keyboard is opening after the editable area, but what happen is not like this. The virtual keyboard is opening just as overlay - It starts overlapping the editable area... . In my case i open a jquery ui dialog where my fields located, but i think that shouldn't matter.

So i let my thoughts crossing and came to the solution to add some additional space. Something like this: JSFiddle . So i am able to scroll down. But this is annoying in case of the fact that it is useless or with other words not needed for people which do not use a device which open a virtual keyboard. So i thought about a function like this:

function isMobileDevice() {
    var isiPhone = navigator.userAgent.toLowerCase().indexOf("iphone");
    var isiPad = navigator.userAgent.toLowerCase().indexOf("ipad");
    var isiPod = navigator.userAgent.toLowerCase().indexOf("ipod");
    var isAndroid = navigator.userAgent.toLowerCase().indexOf("android");
    if (isiPhone > -1 || isiPad > -1 || isiPod > -1 || isAndroid > -1) {
        return true
    } else {
        return false;
    }
}

Well, for this part would be my question did i forget a device, which also open a virtual keyboard and the primary question would be is there anything else except my workaround? I didn't found something to recognize the virtual keyboard explicitly.

Okay guys i really hope that some more experienced web developers will have some ideas about how to solve this best. Like i said i already searched a lot, but nowhere I had a real solution found for this problem!

Edit 24.04.2015:

Guys i just tested it with a Samsung Galaxy Note and the newest mobile browser versions of Firefox, Chrome as well as Opera. (Updated all three, today!)

Okay here is my result:

as you can see all browsers, except Firefox, fail and THIS is the perfect visual example for my problem. The virtual keyboard is overlapping the editable area! Usually i prefer Chrome about any other browser, but for this case i have to say - good work Firefox!