CSS android瀏覽器不允許滾動內容

在我的網站上（www.wetter-goch.de）我正在顯示當前的天氣信息。對於移動設備，我將overflow-y css屬性添加到了div容器。CSS android瀏覽器不允許滾動內容

這就像iOS的Safari一樣工作，但在Android上，該網站不允許滾動瀏覽內容。另外我的背景圖像不會縮放到移動設備的視口大小。

我創建由以下CSS背景

<style> 

html { 
    background: url(<?= DataSource::getCurrentTimeLapsePath() ?>) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

</style>

HTML視口元標記

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">

孔網站的邊欄，CSS ...

.leftsidebar { 

    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    overflow:hidden; 
    z-index:-1; 

    width: 280px; 
    height: 100%; 

    padding: 10px; 

    background-color: rgba(255,255,255,0.7); 

    overflow-y: auto; 
}

相關媒體查詢

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 1000px) { 

    .leftsidebar { 
     width: 100%; 
    } 

    .rightsidebar { 
     display: none; 
    } 

    .radar { 
     display: none; 
    } 

    .statistics { 
     display: none; 
    } 

}

希望有人能幫助我解決這個問題。

來源

2015-11-17 Daniel Bocksteger

什麼是HTML代碼？請提供html以確定發生了什麼。你甚至運行媒體查詢？ – Ravenous

@Ravenous看到編輯的問題，希望這有助於:) –

爲了使用指定的媒體類型，您需要查詢頁面以確定要加載的樣式表。您需要將媒體屬性添加到用於移動「手持」的樣式表。它會在Android上加載正確的表單。

<head> <link rel="stylesheet"type="text/css" href="theme.css"> <link rel="stylesheet"type="text/css" href="print.css"media="handheld"> </head>

來源

2015-11-17 21:32:37 Ravenous

所以我將不得不管理多個樣式表？但爲什麼這是在iOS上工作，而不是在Android上工作？ –

視口管理標記管理iOS的頁面大小。而iOS很大程度上依賴於該視口元標記來使這些屏幕的頁面正確。除非包含在實際應用程序中，否則Android不會使用視口。 – Ravenous

這真的很奇怪...有沒有其他方式由於多個文件？ –

CSS android瀏覽器不允許滾動內容

回答

相關問題