Question

我的页面是980像素，它在风景中看起来很完美，但在肖像中它被切断了。所以我试过

<meta name="viewport" content="user-scalable=no, initial-scale=0.75, minimum-scale=0.75, maximum-scale=0.75, width=device-width">

它显示了完美的肖像，但在景观中它太小了。我试图通过使用js来检测方向更改和重置视口属性，不起作用或工作到一个延伸，但有可怕的错误。我不能使用任何类型的CSS媒体查询，因为该网站是980并且无法更改。

有没有办法做我需要的？感谢

编辑

我尝试了类似

的内容

if (orientation == 0 || orientation == 180) {
    viewport.attr("content", "");
    viewport.attr("content", "user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=990px");
}
else {
    viewport.attr("content", "");
    viewport.attr("content", "user-scalable=no, initial-scale=0.77, minimum-scale=0.77, maximum-scale=0.77, width=990px");
}

检测ipad何时旋转工作，但使用视口的缩放永远不会正常工作

Answer 1

我知道你曾经说过你不想使用css，但假设那是因为你不想处理改变你现有的css以纵向工作，这可能对你有用。

@media only screen and (orientation : portrait) {
    body {
        -webkit-transform: scale(0.75);
    }
}

Answer 2

这不会起作用吗？我的网页是响应式的，但即使在固定宽度的页面上，我也会遇到iOS问题，显示我已解决的方向更改页面愚蠢：

元标记

<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=10.0,initial-scale=1.0" />

其次是我在这里找到的JS：http://www.ternstyle.us/blog/reset-iphone-zoom-on-orientation-change-to-landscape（如果你添加了userAgent支票，可以在iPad上运行。）

iOSZoom.js（需要jQuery）

var mobile_timer = false;
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    $('#viewport').attr('content', 'width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
    $(window).bind('gesturestart', function () {
        clearTimeout(mobile_timer);
        $('#viewport').attr('content', 'width=device-width,minimum-scale=1.0,maximum-scale=10.0');
    }).bind('touchend', function () {
        clearTimeout(mobile_timer);
        mobile_timer = setTimeout(function () {
            $('#viewport').attr('content', 'width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
        }, 1000);
    });
}

然后<script src="iOSZoom.js" type="text/javascript"></script>和新的好：D

如何正确缩放ipad safari上的页面？没有css参与

2 个答案: