0

In a responsive template i have some jquery code to calculate the height of an image proportionally to the screen size. It works in all browser but on Iphone/Ipad when I change from portrait do landscape the image does'nt resize, here is the code, hope someone could help me! Thanks

// for the body resize $(document).ready(function() { var bodywidth = $(document).width(); var ratioheight = (bodywidth/3.582); $("#gallery").height(ratioheight); });

// for the body resize active $(window).resize(function() { var bodywidth = $(document).width(); var ratioheight = (bodywidth/3.582); $("#gallery").height(ratioheight); });

user1818326
  • 21
  • 4

1 Answers1

0

are you using jQuery mobile? if so there is an event to detect orientation change called orientationchange

Or taken from Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions

window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  alert(window.orientation);
}, false);

Effectively your code should be something like this

$(window).bind('orientationchange resize', function(event){
      if(event.orientation) {
            if(event.orientation == 'portrait') {
          // do something
              } else if (event.orientation == 'landscape') {
                       // do something else 
                       } 
            } else {
                  // optional... PC-version javascript for example
                  }

      });
Community
  • 1
  • 1
Atif
  • 10,623
  • 20
  • 63
  • 96
  • Thanks Mohammed, interesting solution but it seems it does'nt work with var bodywidth = $(document).width(); var ratioheight = (bodywidth / 3.582); Do you hane any idea how to keep alive jquery functions in Iphone/Ipad ? – user1818326 Nov 16 '12 at 18:50
  • Still having problem changing from portrait to landscape, the image does'nt resize to fit the width of the window, can I have some help to find out the right solution? Thanks – user1818326 Nov 19 '12 at 13:13
  • Can you put it somewhere on a URL so that I can test on my phone – Atif Nov 19 '12 at 18:56