在調整大小時摺疊我的頁面

我創建了this page，它工作正常，我遇到了有關調整大小的問題，當我調整瀏覽器的大小時，我的頁面被裁剪並且無法滾動到達它。

這是我的HTML代碼在調整大小時摺疊我的頁面

<body id="page-top"> 
    <style type="text/css"> 

    @media (min-width:1500px) { 


    .new_bg { 
    background-image: url(img/bg2000.png); 
    background-size: cover; 

    background-repeat: no-repeat; 
    min-height: 50%; 
    } 

}

在我的CSS代碼

：

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

道歉，如果我沒有趕上所需的代碼部分，你可以參考頁面試試，謝謝。

UPDATE ] 2

來源

2015-11-05 Sadiq Jaffer

在你頁面的CSS，

@media only screen and (orientation:portrait){ 
    header{ 
     display:none; 
    } 
}

這導致網頁在調整窗口大小時隱身。當您開始調整窗口大小時，在某個寬度和高度處，方向變爲縱向，整個頁面設置爲display:none。

根據你的問題，我覺得你不需要這種風格，因爲你的查詢就像你無法找到調整大小的內容。

更新

你.header-content風格是有-webkit-transform:TranslateY()和transform:translateY()。

這使您的內容向上移動並使您的頁面在瀏覽器視圖之外的位置開始。請刪除這兩個。

頁眉內容是有填充值，使你的主要內容，以一些像素向右移動。這導致溢出。請刪除這一點。

來源

2015-11-05 09:48:57

我刪除了這部分，我試圖限制橫向模式的用戶只能用於平板電腦。我需要防止他們有一個更小的屏幕，因爲在某些情況下，我的內容會離開屏幕。 –

你的頁面有一些額外的溢出空間。如果你可以控制它，你將能夠在沒有任何問題的情況下加載橫向頁面。 –

你可以指定確切的地方嗎？讚賞。 –

@media (max-width:1500px) { 


    .new_bg { 
    background-image: url(img/bg2000.png); 
    background-size: cover; 

    background-repeat: no-repeat; 
    min-height: 50%; 
    } 

}

變化最小寬度最大寬度嘗試thiss ...

來源

2015-11-05 09:32:58

仍然沒有改變。 –

可能是寬度problm ..try到768px .... –

我的需要是防止用戶調整更多，所以他們不會得到小頁面，這個寬度爲我的媒體查詢。 –

在調整大小時摺疊我的頁面

回答

相關問題