激活触发器时，HD 手机会调整窗口大小

Question

我有一个导航幻灯片，当触发时，它会将包含所有内容的 div (.page) 推到一边，以便为其显示让路。它可以在调整大小的桌面浏览器和小分辨率手机上按预期工作。问题出在分辨率更高的手机上。它不会将 .page 推到一边，而是调整窗口大小，直到它包含屏幕上的幻灯片和 .page。尽管 html 和 body 具有 100% 的高度，但它们会调整为一半，但手机屏幕的其余部分是空的。我不明白为什么会这样。

我的 html 有元标记：

<meta name="viewport" content="width=600, maximum-scale=1" />

这是我的CSS：

html {
   height: 100%;
   width: 100%;
}

body {
   overflow: hidden;
   background-image: url('../img/bg_landing.jpg');
   background-repeat: no-repeat;
   background-position: center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   height: 100%;
   width: 100%;
   position: relative;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_landing.jpg', sizingMethod='scale');
   -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_landing.jpg', sizingMethod='scale')";
}

.page {
   width: 100%;
   height: 100%;
}

body.slided {
   overflow: hidden;
}

这是我的js：

var ww = $(window).width();
var triggerw = $('#trigger').outerWidth();
var allowed_w = ww - Number(triggerw) - 20;

$('#nav').css('left', -allowed_w);

$('#trigger').click(function() {
    ww = $(window).width();
    allowed_w = ww - Number(triggerw) - 20;

    if($('.page').hasClass('slided')) {
        $('.page').animate({
            'margin-left' : '0px'
        }).removeClass('slided');

        $('#nav').animate({
            'left' : -allowed_w - 5
        });
    }
    else {
        $('.page').animate({
            'margin-left' : allowed_w
        }).addClass('slided');

        $('#nav').animate({
            'left' : '0px',
            'width': allowed_w
        });
    }
});

我无法发布图像，因为我没有足够的声誉，但这里有一个打印屏幕的链接。截图中的深色部分仍然是手机屏幕的一部分。

tinypic 上的图片！

如果您需要更多信息，请告诉我。

Answer 1

我设法通过不允许用户缩放来绕过自动调整大小。 以下是我的新元标记。

<meta name="viewport" content="width=600, user-scalable=no" />

如果有人可以就如何做得更好提出其他建议，请告诉我。