Question

我有一个网站，它使用jquery mobile为它的移动版本。我有一个问题，当我将它从纵向更改为横向时，它正确放大，但当我翻转到纵向时，它保持相同的缩放级别，并且比打破用户体验的视图更宽。我经常使用：

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

从我所做的所有搜索，这应该做。不幸的是，它不适合我。

这是我的问题，我可以使用onorientationchange事件来触发页面的大小调整，我只是不确定如何去做。你能帮忙吗？

P.S。如果您想查看http://tmg.dev.dakic.com/mobile

，网站就在这里

谢谢你，泽利科

Answer 1

试试这个，我遇到了类似的问题：

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

在某些事件中尝试使用resize（）函数：

 $(window).resize();

Answer 2

我通常使用orientationchange事件向内容添加/删除CSS类，然后从那里开始，而不是重新调整视口大小。 Apple提供了一些独立的示例代码，虽然从内存中我认为它只包括90°和0°方向 - 你需要-90°和180°，如@zyrex评论。

iPhoneOrientation sample code (developer.apple.com)

每条评论更新 为了澄清，我不会自己调整HTML实体的大小，而是更改正在使用的类，并依赖CSS来相应地设置样式。举一个简单的例子，假设我想在body元素上的两个类之间切换，取决于设备方向，我会在我的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;
  }
}

...在默认标记中显示类似内容：

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

...然后CSS做任何需要的事情 - 例如。 body元素background的不同位置：

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

更新＃2 您可能还需要修改元标记中的maximum-scale指令。移动Safari通常在从纵向更改为横向时执行缩放，而不是重新执行页面布局，这可能就是您所看到的。

maximum-scale值会阻止这种情况，但您应该注意，这也意味着用户无法执行正常的缩放操作。标签的外观如下：

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

请务必在此处查看答案：

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

Answer 3

似乎没有人知道。从我所看到的，页面上的内容比设备宽度更宽，这是问题的起源。但是，如何解决这个问题仍然不太明确。

如何在ipad中调整/重新缩放网页

3 个答案: