如何在iPhone上更改方向更改时重置Web应用程序的缩放/缩放？

当我以纵向模式启动我的应用程序时,它工作正常.然后我旋转到风景,它扩大了规模.为了使其能够在横向模式下正确缩放,我必须双击两次,首先进行缩放(正常的双击行为),然后再一次缩放(再次,正常的双击行为) .当它缩小时,它会缩小到横向模式的正确新比例.

切换回肖像似乎更加一致; 也就是说,它处理缩放,以便在方向变回肖像时缩放比例正确.

我想弄清楚这是不是一个错误？或者如果这是可以用JavaScript修复的东西？

使用视口元内容,我将初始比例设置为1.0,我没有设置最小或最大比例(我也不想).我将宽度设置为设备宽度.

有任何想法吗？我知道很多人会很感激有一个解决方案,因为它似乎是一个持久的问题.

1> snobojohan..：

---

Jeremy Keith(@adactio)在他的博客定位和规模上有一个很好的解决方案

通过不在标记中设置最大比例来保持标记的可扩展性.

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = ';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = ';
        }, false);
    }
}

---

更新22-12-2014:
在iPad 1上这不起作用,它在eventlistener上失败了.我发现删除.body修复:

document.addEventListener('gesturestart', function() { /* */ });

---

当然这比禁用变焦更好？!我发现的最好的解决方案:)

---

有用.但是,我注意到用户必须捏两次才能进行缩放.我猜这是因为`maximum-scale = 1.0`在手势开始后仍然有效.有没有什么办法解决这一问题？

---

这不起作用有两个原因:1)它禁用了数字1的gesturestart,导致用户需要做两次手势.2)在用户将第一个手势加倍后,它会中断,所以只有当用户从不做手势时它才真正起作用. - 每个人都应该看看Andrew Ashbacher的解决方案.真的行.

2> Andrew Ashba..：

---

Scott Jehl想出了一个出色的解决方案,它使用加速度计来预测方向的变化.此解决方案响应迅速,不会干扰缩放手势.

https://github.com/scottjehl/iOS-Orientationchange-Fix

工作原理:此修复程序通过监听设备的加速度计来预测何时将发生方向更改.当它认为方向即将发生变化时,脚本将禁用用户缩放,允许方向更改正确发生,并禁用缩放.一旦设备朝向靠近竖直方向,或者在其方向发生变化后,脚本将再次恢复缩放.这样,在页面正在使用时,永远不会禁用用户缩放.

缩小来源:

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);

3> rakaloof..：

---

我有同样的问题,并设置最大比例= 1.0适合我.

编辑:如评论中所述,这会禁用用户缩放,除非内容超出宽度分辨率.如上所述,这可能不明智.在某些情况下也可能需要它.

视口代码: