从纵向旋转到横向时 iPad 布局会放大 [英] iPad layout scales up when rotating from portrait to landscape

问题描述

我在 "viewport" 元标记中添加了一个 "width=device-width,initial-scale=1.0" 并且在 iPad 上页面加载得很好在横向模式下，它可以很好地切换到纵向，当我将它旋转回横向时，它会放大页面，我必须捏合将其缩放回 1 级.

我可以通过添加 "maximum-scale=1.0, user-scalable=no" 来解决这个问题，但我想知道是否有一种方法可以在不影响用户的情况下解决这个问题能够放大页面.

如果您有任何建议，我很想听听，
谢谢！

解决方案

------ 更新------

这在 iOS7 中不再是问题.Scott Jehl 在 github scottjehl/iOS-Orientationchange-Fix 上有更好的修复，适用于 iOS6.>

------ 原答案------

Jeremy Keith (@adactio) 在他的博客 方向和比例

保持标记的可扩展性

然后使用 javascript 禁用可扩展性，直到 gesturestart 使用此脚本:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {var viewportmeta = document.querySelector('meta[name="viewport"]');如果(视口元){viewportmeta.content = '宽度=设备宽度，最小比例=1.0，最大比例=1.0，初始比例=1.0';document.body.addEventListener('gesturestart', function () {viewportmeta.content = '宽度=设备宽度，最小比例=0.25，最大比例=1.6'；}， 错误的);}}

I have a added to the "viewport" meta tag "width=device-width,initial-scale=1.0" and on an iPad the page loads up fine in landscape mode, the it switches nicely to portrait and when I rotate it back to landscape it scales the page up and I have to pinch zoom it back to a 1 scale.

I can fix this by adding the "maximum-scale=1.0, user-scalable=no", but I was wondering if there is a way I could fix this without taking away from the user the ability to zoom in the page.

If you have any suggestions I would love to hear them,
Thanks!

解决方案

------ Update ------

This is not an issue anymore in iOS7. And there is better fix by Scott Jehl on github scottjehl/iOS-Orientationchange-Fix that works for iOS6.

------ Original answer ------

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

Keep the Markup scalable

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

Then disable scalability with javascript until gesturestart 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);
    }
}

这篇关于从纵向旋转到横向时 iPad 布局会放大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！