Question

我正在把头发拉出来...我知道它已经在很多线程中讨论过，但我找不到适用于我的解决方案。

iPad和iPhone的不同问题

当我使用它时：

<meta name="viewport" content="width=device-width, maximum-scale=3.0,user-scalable=yes"/>

页面在横向模式下显示正常（在iPhone和iPad上）
页面在纵向模式下太宽，无法通过缩放缩小

现在（这有点好笑）：

<meta name="viewport" content="width=device-height, maximum-scale=3.0,user-scalable=yes"/>

差异是width = device- height （相对于device- width ）

在横向和纵向模式下，iPad上的页面显示正常
在iPhone上的纵向模式下页面太宽，在风景中工作正常

当我使用initial-scale=1.0时，一切都完全搞砸了（我读到不应该使用初始比例？）

有人对此有解释吗？

Answer 1

如果你使用它：当你加载到Landscape并转到Portrait时，这将解决。如果你有固定的PX最小宽度，我认为固定宽度可以杀死它。

    // BUG orientation portrait/lanscape IOS //
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.addEventListener('orientationchange', function () {
        viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1';
    }, false);
  }
}

你也可以使用CSS修复它，如下所示：

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
 html {zoom:0.75;}
}

仅在纵向模式下缩放到0.75 ..

你能先测试一下吗？

<meta name="viewport" content="height=device-height,width=device-width">

iPad上的视口奇怪的行为

1 个答案: