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

Question

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

我的 html 有 meta 标签：

<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
        });
    }
});

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

Image on tinypic!

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

Answer 1

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

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

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