如何使用user-scalable = yes在android，iphone中为布局视口保持固定宽度； 使用jQuery Mobile

Question

The site should have a fluid-layout, adjusting to the width of the device, in both portrait and landscape orientations. Here's my meta viewport tag:

<meta name="viewport" id="viewportid" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">

The problem is when the user zooms, the content flows to adjust to the visual viewport. I want to ensure the content remains static. That is, the layout viewport is unaffected by the visual viewport.

How can I prevent the content from flowing when zooming?

Thank you very much for any help. This has been aggravating as hell.

Here is an example of the page zoomed out (scale=1) (Android 2.1 Emulator SDK)

Here is an example of the same page, zoomed in (Android 2.1 Emulator SDK)

Answer 1

I tried fiddling around with photoswipe and iScroll4, but I want the user to pinch-zoom and iScroll4 doesn't seem to work with Android Ver <=1.6, according to testing I did on the Android Emulator SDK. I thought I could try something better suited for my needs.

So, AFAIK, and I could be very wrong, there's no way to track the zoom level, per the meta viewport tag, on Android devices. jQuery Mobile doesn't have such a feature; maybe Sencha, Phonegap, or some Android Java libraries facilitate this and I'd be more than happy to be corrected!

Now then, it's not the best method, but I figured out a way that seems to be accurate within 1 or 2 pixels, at worst. I wasn't sure if Android changes it's zoom level innately on an orientation change event, but I gave my method a shot and it worked.

Here's the code:

$(document).ready(function(){
  var ViewportWidth = document.documentElement.clientWidth;
  var LayoutWidth = document.documentElement.clientWidth;

  $("#Index").css("width", LayoutWidth);

  var SetLayoutWidth = function() {
    LayoutWidth = Math.round((1/(ViewportWidth/LayoutWidth)) * document.documentElement.clientWidth);
    $("#Index").css("width", LayoutWidth);
  }

  $(window).resize(function() {
    ViewportWidth = document.documentElement.clientWidth;
  });

  $(window).bind("orientationchange", function(event) {
    if (navigator.userAgent.match(/android/i))
      if (Math.abs(window.orientation) == 90 && event.orientation == "landscape")
        SetLayoutWidth();
      else if (!window.orientation && event.orientation == "portrait")
        SetLayoutWidth();
  });
});

When the user zooms, the visual viewport width changes, whose value is stored. The ratio of visual viewport to layout viewport width is, say, 0.8, after the user zooms. Now, when the user changes the device's orientation, the ratio is divided by 1. To realize what the layout viewport width should be at full screen, in this example, I need to take 125% of the visual viewport width.

The one problem I know that may creep up is the resize event might fire before the orientation change event. I haven't seen this occur in testing, but I'll need to determine how to tackle that, if and when it does occur.

Thank you.