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

Question

我一直试图让网站缩放以适应 iPad 中的肖像，但无济于事..这是我的元:

<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

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

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

Answer 1

可能是因为旧的“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);
    });
}
}