我有下面的CSS动画,所有的工作在桌面浏览器(即使窗口大小调整)。
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: #0e1624;
overflow-y: hidden;
overflow-x: hidden;
animation: enable-scroll 0.1s forwards;
color: white;
scroll-behavior: smooth;
}
@keyframes enable-scroll {
to {
overflow-y: auto;
}
}
#page-loader {
animation: page-loaded 0.3s ease-in-out forwards;
animation-delay: 2.5s;
}
@keyframes page-loaded {
to {
display: none;
}
}
正如我所说,在桌面上,或多或少与浏览器无关,它可以毫无障碍地运行。然而,每当我尝试打开我的手机上的网站,动画不运行,因此,没有内容显示。
有谁知道是什么原因导致的吗?
1条答案
按热度按时间uqxowvwt1#
我只能离开你的帖子,所以我假设你是手动关闭窗口,这并不完全代表响应。你需要使用你的开发工具,无论你使用什么浏览器,从那里你可以选择特定的设备进行测试。
对于Google Chrome、微软Edge和Mozilla Firefox:Windows:按F12或Ctrl + Shift + I macOS:按Cmd + Option + I
对于macOS上的Safari:macOS:按Cmd + Option + I