Ignore or disable mobile viewport resize due to keyboard open for text inputs on mobile web?

Question

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 b

Answer 1

It looks like you could simplify your HTML/CSS and that might resolve your problem.

Why not just add your background-image stuff to and then remove all those extra tags. Down forget to set your viewport meta tag. i always start with this and then change it as needed.

https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Answer 2

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.

});