how to resize / rezoom webpage in ipad

Question

I have a website that uses jquery mobile for it's mobile version. I have a problem when I am changing it from portrait to landscape it zooms in correctly, but when I flip to portrait, it stays same zoom level and is wider then the view which breaks user experience. I use regular:

<meta name="viewport" content="width=device-width, initial-scale=1">

from all the search I did, this should do. Unfortunately it isn't working for me.

Here is my question, I can use onorientationchange event to trigger resizing of the page, I am just not sure how to go about it. Can you help please?

P.S. website is here if you would like to take a peek http://tmg.dev.dakic.com/mobile

Thank you, Zeljko

score 9 · Accepted Answer · edited Jun 02 '14 at 20:10

9

Try this, I had a similar issue:

    $(window).bind('orientationchange', function(event) {
    if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {
        $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
        $(window).resize();
        $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=2.0');
        $(window).resize();
    } else {
        $('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
        $(window).resize();
        $('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=2.0');
        $(window).resize();
    }
    }).trigger('orientationchange');

Try otherwise using the resize() function at certain events:

 $(window).resize();

edited Jun 02 '14 at 20:10

Ivan Gonzalez

3
1
3

answered Sep 29 '11 at 13:51

dotchuZ

2,621
11
39
65

I just want to thank you one more for answering, this is GOLD. Thing is that I searched everything and I couldn't find anything like this. Everywhere was examples with adding a class which unfortunatelly couldn't help me without serious rewrite. So thanks a bunch! – Zeljko Dakic Sep 30 '11 at 18:39
the problem with this approach is you prevent the user from scaling, which can't be good for accessibility... – scruffian Sep 17 '12 at 16:08
Thank you, I was losing my sleep over this. – Max Aug 05 '13 at 12:58

score 2 · Answer 2 · edited May 23 '17 at 12:27

I typically use the orientationchangeevent to add / remove CSS classes to the content, and go from there, rather than re-size the viewport. Apple provide some stand-alone example code, although from memory I think that it only includes 90° and 0° orientations—you need -90° and 180° too, as in @zyrex comment.

iPhoneOrientation sample code (developer.apple.com)

Update per comment: To clarify, I don't re-size HTML entities themselves, rather change the classes being used, and rely on CSS to style accordingly. To take a simplistic example, say I want to switch between two classes on the body element, depending on device orientation, I would do something like this in my Javascript:

window.onorientationchange = updateOrientation;
// (Might want to do this onload too)

function updateOrientation(){
  var o = window.orientation, body = document.querySelector('body');

  switch(o){
    case 0: case 180:
      body.className = 'portrait';
      break;

    case 90: case -90:
      body.className = 'landscape';
      break;
  }
}

… and something like this in the default mark-up:

<body class="portrait">
  <!-- stuff here -->

… and then CSS which does whatever is required—e.g. a different position for the body element's background:

body {background: url('images/something.png') no-repeat}
body.portrait {background-position: 30% 50%}
body.landscape {background-position: 10% 25%}

Update #2 You may also need to tinker with the maximum-scale directive in your meta tag. Mobile Safari typically does a zoom when changing from portrait to landscape, instead of re-doing the page layout, and that may be what you're seeing.

The maximum-scale value prevents this, but you should note that this also means users can't do the normal pinch-to-zoom thing. Here's how the tag would look:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Be sure to check the answers here too:

How do I reset the scale/zoom of a web app on an orientation change on the iPhone?

yes thats true (-90 and 180), could you provide some code that illustrate your css behavior? (interesting would be how you resize, which elements you resize) — dotchuZ, Sep 30 '11 at 09:18
Thank you for your answer Ben, yeah I was aware of this, however this was not helping me, my css is structured so that would work on devices with various widths. You solution is absolutely good and frankly maybe better when you can use this. Thank you for answering my question. — Zeljko Dakic, Sep 30 '11 at 18:38

score 0 · Answer 3 · answered Sep 27 '11 at 19:19

0

It seems no-one knows. From what I could see, content on the page somewhere is wider then device-width and this is where the problem originates. However, how to go about solving this is still not quite clear.

answered Sep 27 '11 at 19:19

Zeljko Dakic

1,223
1
11
19

You may need to play with `maximum-scale` to work with this. I've updated my answer. – Ben Oct 06 '11 at 08:48

how to resize / rezoom webpage in ipad

3 Answers3

Linked