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

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

Image on tinypic！

如果您需要其他信息，请与我们联系。

Answer 1

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

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

如果有人可以就如何更好地做到这一点提出另一个建议，请告诉我。

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

1 个答案: