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浏览器不允许滚动内容

回答

相关问题