CODEWITHSUNDEEP
javascriptandroidjqueryjquery-mobilekeyboard
Paul Ledger
Paul Ledger

Reputation: 1135

Jquery prevent device keyboard from re-sizing browser content

I have site that scales everything to fit the users mobile device screen. But when the default keyboard is brought up the whole site is rescaled. It is possible to have the keyboard overlay the website so to not distort the site or zoom and focus on the particular input field the user has touched.

what it should like This what I thought would happen or a very similar effect.

But this is what is happening enter image description here

The content on right remains unchanged. This has a fixed width but positioned to fit:

top:0px;
bottom:0px;
left:0px;

The pages are sized and scaled on the page load. These are set heights and widths. E.g if the height is 600px then the width would be 800px.

    var windowWidth = parseInt(window.innerWidth);
    var windowHeight = parseInt(window.innerHeight);    
    //set content height 90% of windowHeight
    var c_height = windowHeight / 100 * 95;
    var c_width = c_height * 1.48;
    $('#content').css('height',c_height+'px');
    $('#content').css('width',c_width+'px');

I came across something similar to this, but have had no success:

function updateViews() {
    $('#page').hide();
    if (is_keyboard) {
        $("#page").hide();
    }
    else {
        $('#page').show();
    }
}
window.addEventListener("resize", function() {
    is_keyboard = (window.innerHeight < initial_screen_size);
    is_landscape = (screen.height < screen.width);

    updateViews();
}, false);
/* iOS */
$("input").bind("focus blur",function() {
    $(window).scrollTop(10);
    is_keyboard = $(window).scrollTop() > 0;
    $(window).scrollTop(0);
    updateViews();
});

This something I thought would have been defaulted by the device.

UPDATE: if it helps all the page content is wrapped in a div;

<div id="body" style="width:100%; height:100%;">

Also the keyboard wont open any other input only the bar at the top.

Upvotes: 0

Views: 1767

Answers (1)

Ohjay44
Ohjay44

Reputation: 897

Try This out, I am developing for a mobile, and my page is fixed so this might work.

<div id="body" style="width:100%; height:100%; position: fixed">

Upvotes: 2

Related Questions