网站无法在 iPad 纵向和移动横向中缩放

Question

我一直在尝试让网站缩放以适应 iPad 中的 Portrait，但无济于事..这是我的元数据：

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

也将此添加到脚本中：

<script type="text/javascript">
    if(navigator.userAgent.match(/iPad/i)) {
        viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute('content', 'width=980');
    }
</script>

在我的查询中的 CSS 上我尝试了这个：

@media only screen and ( min-width: 768px) and ( max-width: 1024px ) {
    body {min-width: 980px;}
}

根据我在这里看到的：

iPad not scaling site down website correctly in portrait orientation

我也试过身高，但没用...

这里也有类似的问题：

Safari on iPad Does Not Fit 980px Width Site in Portrait Mode

但老实说，我什至不明白是否有答案（我没有关闭视口..）......

正如我所提到的，看起来不错，但在纵向上我必须向左滑动才能看到整个画面。最后在移动设备中，它非常适合 320，但是当横向时它仍然保持在 320，所以我认为它可能是 缩放中的相同情况 ....我认为我不必使用 %。 ...但是是这样吗？

Answer 1

这是 iOS http://adactio.com/journal/5088/ ?

这在 iOS6 中已修复，但如果您需要在旧设备上使用它，您可以尝试 -

http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/

或https://github.com/scottjehl/iOS-Orientationchange-Fix

Answer 2

可能是因为旧的“orientation problem”。

你可能想试试这个代码：

if (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';
    jQuery(document).ready(function() {
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    });
}
}