从纵向旋转到横向时，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来解决这个问题，但我是想知道是否有办法解决这个问题，而不会让用户放大页面的能力。

如果您有任何建议，我很乐意听到他们，

Thanks！

解决方案

<更新------ p>

在iOS7中这不再是个问题。 Scott Jehl在github上有更好的解决方法： scottjehl / iOS-Orientationchange-Fix 适用于iOS6。 p>

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

Jeremy Keith（@adactio ）在他的博客定位和规模

保持标记可伸缩

 < meta name =viewportcontent =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）; 
} 
} 
  

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屋！