CSS android浏览器不允许滚动内容
Posted
技术标签:
【中文标题】CSS android浏览器不允许滚动内容【英文标题】：CSS android browser does not allow to scroll content 【发布时间】：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 查看已编辑的问题，希望对您有所帮助:) 【参考方案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 标签。以上是关于CSS android浏览器不允许滚动内容的主要内容，如果未能解决你的问题，请参考以下文章