如何在ipad中调整网页大小/缩放

how to resize / rezoom webpage in ipad

本文关键字：缩放 网页 调整 ipad      更新时间：2023-09-26

我有一个网站，使用jquery移动为它的移动版本。我有一个问题，当我把它从纵向改为横向，它放大正确，但当我翻转到纵向，它保持相同的缩放水平，然后更宽的视图，这破坏了用户体验。我用regular:

<meta name="viewport" content="width=device-width, initial-scale=1">
我所做的所有搜索中的

，这个应该做。不幸的是，这对我不起作用。

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

注:网站在这里，如果你想偷看一下http://tmg.dev.dakic.com/mobile

谢谢你,泽尔科-

试试这个，我有一个类似的问题:

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

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

iPhoneOrientation示例代码(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指令。Mobile Safari在从纵向切换到横向时通常会进行缩放，而不是重新进行页面布局，这可能就是你所看到的。

maximum-scale值阻止了这种情况，但您应该注意，这也意味着用户不能执行正常的捏缩操作。下面是标签的样子:

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

一定要在这里检查答案:

如何在iPhone上改变方向时重置web应用的缩放/缩放?

似乎没人知道。从我所看到的，页面上的内容比设备宽度更宽，这就是问题的根源。然而，如何着手解决这个问题仍然不是很清楚。

相关文章：