我有一个使用 jquery mobile 作为其移动版本的网站。当我将它从纵向更改为横向时，它会正确放大，但是当我翻转到纵向时，它会保持相同的缩放级别并且比视图更宽，这会破坏用户体验。 我使用常规：
<meta name="viewport" content="width=device-width, initial-scale=1">
从我所做的所有搜索来看，这应该可以。不幸的是，它对我不起作用。
这是我的问题，我可以使用 onorientationchange 事件来触发页面大小的调整，我只是不知道该怎么做。你能帮忙吗？
附：如果您想看一看，网站就在这里http://tmg.dev.dakic.com/mobile
谢谢你， 泽利科
【问题讨论】：
标签： javascript iphone ipad jquery-mobile mobile-safari
试试这个，我遇到了类似的问题：
$(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();
【讨论】：
我通常使用orientationchangeevent 向内容添加/删除 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?
【讨论】：
似乎没有人知道。据我所知，页面上某处的内容比设备宽度更宽，这就是问题的根源。但是，如何解决这个问题仍然不是很清楚。
【讨论】：
maximum-scale 才能使用它。我已经更新了我的答案。