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>

在Queries的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＆lt; 5.1缩放错误的问题 - 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);
    });
}
}

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

2 个答案: