16

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?

jennz0r
  • 1,533
  • 2
  • 15
  • 26

3 Answers3

1

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.

});
Thaillie
  • 1,362
  • 3
  • 17
  • 31
Juliyanage Silva
  • 2,529
  • 1
  • 21
  • 33
  • Yes, I had this Javascript solution in mind, but wanted to avoid listening for the resize event. I'm mostly trying to see if there exists something to just turn off the viewport resize for keyboards natively... Fat chance, I know, but thought it was worth putting it out there. – jennz0r Mar 27 '14 at 20:33
  • let's say if you turned it off. then how are you going to focus the input fields on your page. – Juliyanage Silva Mar 28 '14 at 03:33
  • Good point. I suppose I assumed that it was possible for the screen to scroll up to ensure that the input field remained in view. Hmm. – jennz0r Mar 28 '14 at 04:11
  • just accept jquery mobile into yourlife. It will handle all these hazards. – Juliyanage Silva Mar 28 '14 at 04:32
  • 2
    Can you tell that to my boss? :) – jennz0r Mar 28 '14 at 04:39
0

In case someone is actually OK with the jQuery solution:

jQuery(document).ready(function() {
var viewportWidth = jQuery(window).width();

    jQuery(window).resize(function(){
        var viewportWidthResized = jQuery(window).width();
    
        if (viewportWidth !== viewportWidthResized) {
            // do the work
            viewportWidth = viewportWidthResized;
        }
    });
});
Tahi Reu
  • 558
  • 1
  • 8
  • 19
-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

andykmcc
  • 29
  • 2
  • Please, whenever possible, add some sample code to your answers to better describe the suggested solution. – rdonatoiop Mar 27 '14 at 20:11
  • I do have the viewport meta tag in my code. `` as an example for people who don't know it. The code I showed above is just a strategy for the background image I'm using, not my actual code. It's just the portion that conflicts with the keyboard resize. – jennz0r Mar 27 '14 at 20:28