在我的网站 (www.wetter-goch.de) 上，我正在显示当前的天气信息。对于移动设备，我将 overflow-y css 属性添加到 div 容器。
这在 iOS 的 Safari 上非常有效，但在 Android 上该站点不允许滚动浏览内容。此外，我的背景图片未缩放到移动设备的视口(viewport)大小。
我正在通过以下 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 视口(viewport)元标记
<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;
}
}
希望有人能帮我解决这个问题。
最佳答案
为了使用指定的媒体类型，您需要查询页面以确定要加载的样式表。您需要将媒体属性添加到用于移动“手持设备”的样式表。然后它会在 Android 上加载正确的工作表。
<head>
<link rel="stylesheet"type="text/css" href="theme.css">
<link rel="stylesheet"type="text/css" href="print.css"media="handheld">
</head>
关于android - CSS android 浏览器不允许滚动内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33767035/