gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 06:51:02 25 4
gpt4 key购买 nike

在我的网站 (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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com