网站动画运行在移动设备上，但不在PC上 [英] Website animations running on mobile but not on PC

问题描述

我正在申请大学，因此正在为我自己制作一个在线投资组合类型的网站。它的live @ yadullah.coolpage.biz（忽略域名，你知道的免费域名）

当我在本地运行它时，它的工作很好，但是每当我将它上传到域并打开它，动画不会加载。然而，经过一些刷新，他们开始工作。

奇怪的是，从手机访问时，网站运行得很好。我试过我自己的Blu Win HD LTE运行纪念碑浏览器，以及一些Android模型。所有在该网站进行测试的手机都完美运行。此问题仅在PC上存在。

我的所有图片都经过了网页优化。我的意思是它们都小于500kb。除此之外，网站上只有文字。尝试Chrome和Safari，问题仍然存在

我使用的动画来自Animate on Scroll库。查看此处

我真的不知道发生了什么问题。

解决方案

我在考虑问题是动画在一个大的视口被禁用。也许尝试覆盖默认的禁用属性值。尝试传入 null 或一个不会被满足的条件。
I.e

  AOS.init（{disable：window.innerWidth <0}）; 
  

I am applying to college and hence was making an online portfolio type website for my self. Its live @ yadullah.coolpage.biz (ignore the domain name, free domains you know)

Its working just fine when I run it locally, but whenever I upload it to the domain and open it, the animations don't load. After a few refreshes however, they start working.
Strange thing is that the website runs just fine when accessed from mobile phones. I've tried my own Blu Win HD LTE running Monument Browser, and a few android models. All the phones on which the site was tested on ran it perfectly. This issue persists on PC only.

All my images are web optimized. By that I mean they are all below 500kb in size. Other than that there's only text on the website. Tried Chrome and Safari, issue persists

The animations I am using are from the Animate on Scroll library. Check it out here

I really can't figure out what's going wrong.

解决方案

I am thinking the problem is that the animations are being disabled on a large viewport. Perhaps try overriding the default disable property value. Try passing in null or a condition that will not be met. I.e

AOS.init({disable: window.innerWidth < 0});

这篇关于网站动画运行在移动设备上，但不在PC上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！