CSS android浏览器不允许滚动内容答案

【问题标题】：CSS android browser does not allow to scroll contentCSS android浏览器不允许滚动内容
【发布时间】：2015-11-17 21:09:01
【问题描述】：

在我的网站 (www.wetter-goch.de) 上，我正在显示当前的天气信息。对于移动设备，我将 overflow-y css 属性添加到 div-container。

这在 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">

洞网站的Sidebar-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; 
    }

}

希望有人能帮我解决这个问题。

【问题讨论】：

HTML 代码是什么？请提供 html 以确定发生了什么。你甚至在运行媒体查询吗？
@Ravenous 查看已编辑的问题，希望对您有所帮助:)

标签： android html ios css background

【解决方案1】：

为了使用指定的媒体类型，您需要查询页面以确定要加载的样式表。您需要将媒体属性添加到用于移动“手持”的样式表中。然后它将在 Android 上加载正确的工作表。

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

【讨论】：

所以我必须管理多个样式表？但为什么这适用于 iOS 而不是 Android？
视口mets标签管理iOS页面的大小。 iOS 严重依赖视口元标记来使页面正确地用于这些屏幕。除非包装在实际应用程序中，否则 Android 不会使用视口。
真是奇怪……因为文件多，有没有其他办法？
我目前不知道。老实说，尽管当工作表开始变得非常大时，拥有多张工作表会更好。为什么你可以有另一个样式表？
@DanielBocksteger 尝试加载相同的 CSS 文件，但使用媒体查询，它应该会找到该单个文件中列出的 @media 标签。