當觸發器被激活時，HD Phone調整窗口大小

我有一個導航幻燈片，當它被觸發時，它將一個包含所有內容的div（.page）推到一邊，讓它出現。它可以在調整大小的桌面瀏覽器和小型分辨率手機上按預期工作。問題在於分辨率更高的手機。不要將.page推到一邊，而是調整窗口大小，直到它包含幻燈片和屏幕上的.page。儘管html和body具有100％的高度，但它們的大小調整爲其中一半，其餘的電話屏幕都是空的。我不明白爲什麼會這樣。當觸發器被激活時，HD Phone調整窗口大小

我的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！

讓我知道你是否需要額外的信息。

來源

2014-04-04 Lorin Ionita

你能提供一個問題的截圖嗎？ – aurbano

嗨，添加了截圖的鏈接，因爲我還無法發佈圖片。 –

我設法繞過了不允許用戶縮放的自動調整大小。以下是我的新元標記。

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

如果任何人都可以提出有關如何做得更好的另一個建議，請告訴我。

來源

2014-04-10 12:47:18

說得太快。現在，它被顛倒了。較小的電話現在是問題。 –

當觸發器被激活時，HD Phone調整窗口大小

回答

相關問題