hexo next主题中关于pc端点击链接没问题,移动端点击链接页面不显示。

时间:2020-12-29 01:10:51

个人博客:https://mmmmmm.me

源码:https://github.com/dataiyangu/dataiyangu.github.io

背景

hexo next主题,本人diy的时候pc端点击链接显示正常,但是移动端点击链接页面会偶尔显示偶尔不显示的情况。

解决

单单针对这个错误是不太好排查的,我们先解决看看是不是有其他的错误影响了,通过访问博客发现报错了,是关于require的timeout错误,在自己的另一个文章中解决了这个问题,https://blog.csdn.net/dataiyangu/article/details/85057894 ,解决了之后经过将近十次的测试,貌似正常了。

原因的分析

应该是因为require的timeout导致页面加载不出来。

再次完善

/*音乐播放器*/
define(function () {
  //判断是否是mobile的函数
  function isMobile() {
    var userAgentInfo = navigator.userAgent;

    var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];

    var mobile_flag = false;

    //根据userAgent判断是否是手机
    for (var v = 0; v < mobileAgents.length; v++) {
      if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
        mobile_flag = true;
        break;
      }
    }

    var screen_width = window.screen.width;
    var screen_height = window.screen.height;

    //根据屏幕分辨率判断是否是手机
    if(screen_width < 500 && screen_height < 800){
      mobile_flag = true;
    }

    return mobile_flag;
  }
    aplaer();
    function aplaer() {
      //falsedakai  false表示没点击打开
      //falsechuxian false表示没有把鼠标移入
      var flag_music = false
      flagchuxian=false;
      var isMobile = isMobile();
      if(isMobile){
        $(".aplayer-body").mouseenter(function () {
          if (flagchuxian==false&&flag_music==false){
            $(".aplayer-body").css({"left":"0px"})
            flagchuxian=true;
            flag_music==false;
          }
        })

        $(".aplayer-body").mouseleave(function () {
          if (flagchuxian==true&&flag_music==false) {
            $(".aplayer-body").css({"left": "-66px"})
            flagchuxian=false;
            flag_music=false;
          }
        })
      }

    $(".aplayer-icon:last").on("click",function () {
        if (flag_music==false) {
          $(".aplayer-body").css({"left": "0px"})
          flag_music=true;
        }else {
          $(".aplayer-body").css({"left": "-66px"})
          flag_music=false;
        }
      })
    }

})

还有可能是因为mouseenter在手机端不行的原因,进行一次判断。

收获

前端不太熟,让我想起了大二的时候记在笔记本上的一句话,先解决目前已有的错误,在进行真正想要解决的错误,可能就迎刃而解了,看似没有关联的两个问题,其实里面有着千丝万缕的联系。