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

我有一个网站，它的移动版本使用jquery mobile。当我将其从纵向更改为横向时，我遇到了一个问题，它会正确放大，但是当我翻转到纵向时，它保持相同的缩放级别，并且视角更宽，从而破坏用户体验。我用正：如何在ipad中调整大小/重新缩放网页

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

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

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

P.S.网站是在这里，如果你想偷看http://tmg.dev.dakic.com/mobile

谢谢泽利科

来源

2011-09-26 Zeljko Dakic

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

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

尝试以其他方式使用调整大小（）函数在某些事件：

$(window).resize();

来源

2011-09-29 13:51:01 zyrex

谢谢，这就是我一直在寻找的东西。 –

我只是想多谢你回答，这是金。事情是我搜查了一切，但我找不到像这样的东西。到处都是增加一个班级的例子，如果没有认真的重写，那么这个班级不会帮助我。所以谢谢一堆！ –

这种方法的问题是你防止用户缩放，这对于辅助功能来说不是好的... – scruffian

似乎没有人知道。从我所看到的情况来看，页面上的内容比设备宽度更宽，这就是问题的起因。但是，如何解决这个问题还不是很清楚。

来源

2011-09-27 19:19:25

你可能需要用'最大scale'玩这个工作。我已经更新了我的答案。 – Ben

我通常使用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; 
    } 
}

...而这样的事情在默认标志-up：

<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 您可能还需要在您的meta标签的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?

来源

2011-09-30 06:49:57 Ben

是的，这是真的（-90和180），你能提供一些代码来说明你的CSS行为？（有趣的是你如何调整大小，你调整了哪些元素） – zyrex

我已经更新了我的答案 – Ben

谢谢你的回答本，是的我意识到这一点，然而这并没有帮助我，我的CSS是结构化的，在各种宽度的设备上。你的解决方案绝对是好的，当你可以使用它的时候坦率地说可能会更好。谢谢你回答我的问题。 –

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

回答

相关问题