可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

回答1:

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();

回答2:

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?

回答3:

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.