I'm using this CSS-only strategy for responsive background images and responsive background image and contained content ... an example of the type of setup I'm using for background and content:
<div class="fullscreen-cont">
<div class="fullscreen-img"></div>
<div class="cont-content-a">
<div class="cont-content-b">
Example content
</div>
</div>
</div>
.cont-content-a {
display:table;position:relative;z-index:2;
width:100%;
height:100%;
}
.cont-content-b {
display:table-cell;
vertical-align:middle;
text-align:center;
}
I edited the above code to just include the styles for the content. Click the link above to see the full strategy and styles.
The main page I'm working on essentially a logo, text input with inline button, and login button below. Both the logo and login button are positioned absolutely. Everything looks great on a mobile device.
The problem occurs only if the user touches to input text. The keyboard shrinks the viewport and therefore, the background image, squishing and overlapping all the contained content.
Does anyone know if there's a way to disable the viewport resize when the keyboard is opened on mobile devices? And is there a way to accomplish this without mobile jQuery?
Usually if you do not use Jquery mobile then you will have to manually fix all the bugs coming with different phone OSs. If you want to skip this library you will have to listen to viewport resize change event and through listening to it get the remaining height and width of the viewport.
trigger a function according to viewport change like this
$(window).resize(function()
{
});
and inside that get the viewport width height and then adjust the layout accordingly.
$(window).resize(function()
{
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
//do your layout change here.
});