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

Question

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

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

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

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

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

Answer 1

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

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

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

然后用JavaScript负载禁用的可扩展性,直到gesturestart当你再次允许可扩展性,此脚本:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}

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

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

Answer 2

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

Answer 3

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

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

视口代码:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;">