如何在 iPhone 上的方向更改时重置 Web 应用程序的比例/缩放? [英] How do I reset the scale/zoom of a web app on an orientation change on the iPhone?

问题描述

当我以纵向模式启动我的应用时，它运行良好.然后我旋转到横向并按比例放大.为了让它在横向模式下正确缩放，我必须双击某些东西，首先放大(正常的双击行为)然后再一次放大(再次，正常的双击行为).当它缩小时，它会缩小到横向模式的正确新比例.

When I start my app in portrait mode, it works fine. Then I rotate into landscape and it's scaled up. To get it to scale correctly for the landscape mode I have to double tap on something twice, first to zoom all the way in (the normal double tap behavior) and again to zoom all the way out (again, the normal double tap behavior). When it zooms out, it zooms out to the correct NEW scale for landscape mode.

切换回纵向似乎更一致；也就是说，它处理缩放，以便在方向变回纵向时比例正确.

Switching back to portrait seems to work more consistently; that is, it handles the zoom so that the scale is correct when the orientation changes back to portrait.

我想弄清楚这是否是一个错误?或者这是否可以通过 JavaScript 修复?

I am trying to figure out if this is a bug? or if this is something that can be fixed with JavaScript?

对于视口元内容，我将初始比例设置为 1.0，并且我没有设置最小或最大比例(我也不想).我将宽度设置为设备宽度.

With the viewport meta content, I am setting the initial-scale to 1.0 and I am NOT setting minimum or maximum scale (nor do I want to). I am setting the width to device-width.

有什么想法吗?我知道很多人会很高兴找到解决方案，因为这似乎是一个长期存在的问题.

Any ideas? I know a lot of people would be grateful to have a solution as it seems to be a persistent problem.

推荐答案

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

Jeremy Keith (@adactio) has a good solution for this on his blog Orientation and scale

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

Keep the Markup scalable by not setting a maximum-scale in markup.

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

然后在加载时使用 javascript 禁用可扩展性，直到 gesturestart 当您再次使用此脚本允许可扩展性时:

Then disable scalability with javascript on load until gesturestart when you allow scalability again with this script:

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

<小时>

2014 年 12 月 22 日更新:
在 iPad 1 上这不起作用，它在事件监听器上失败.我发现删除 .body 可以解决这个问题:

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

这篇关于如何在 iPhone 上的方向更改时重置 Web 应用程序的比例/缩放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！