个人博客: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在手机端不行的原因,进行一次判断。

收获

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

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

  1. hexo next主题中遇到的关于require的timeout的问题。Uncaught Error: Load timeout for modules:

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景 报错:Uncaught Error: L ...

  2. .Net MVC中访问PC网页时,自动切换到移动端对应页面

    随着移动端的流行,越来越的网站,除了提供PC网页之外,也提供了移动端的H5页面,手机在访问www.xxx.com的时候,能自动跳转到mobile.xxx.com.网上很多在实现时也能使用JS直接进行跳 ...

  3. hexo next 主题 : 实现点击跳转到文章的时候文章的页面自动实现滚轮效果,向下滚动到阅读的位置。

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景: 博主的博客希望实现能够在点击到某个文章 ...

  4. hexo next主题深度优化(十一),next主题中加入scrollReveal.js,让文章随着鼠标的滚动,出现点小动作。

    文章目录 效果 scrollReveal简单介绍以及简单操作 参考文档: next主题中加入scrollReveal 给article标签添加属性 给底部的不蒜子添加属性 本地引入依赖并且编写启动函数 ...

  5. Hexo next主题下添加天气插件

    最近在优化hexo 新搭建的博客,想给博客添加一个天气插件,奈何找了很久也没发现,好不容易发现一个天气插件 心知天气:https://www.seniverse.com/widget/get 运气不好 ...

  6. hexo next主题深度优化(一),加入pjax功能。

    文章目录 背景: 进入正题 pjax初体验--instantclick 真正的pjax 第一步 第二步 第三步 第四步 专门基于hexo next主题的pjax(将丢失的js效果重现) 将下面讲到的提 ...

  7. Hexo、主题、部署上线

    Hexo.主题.部署上线 安装Hexo git和nodejs安装好后,就可以安装hexo了,你可以先创建一个文件夹MyBlog,用来存放自己的博客文件,然后cd到这个文件夹下(或者在这个文件夹下直接右 ...

  8. ASP.NET在主题中添加CSS文件

    ASP.NET在主题中添加CSS文件 在ASP.NET中,可以使用CSS来控制页面上HTML元素和ASP.NET控件的皮肤.如果在主题文件夹中添加了CSS文件,则在页面应用主题时也会自动应用CSS. ...

  9. Hexo 官方主题 landscape-plus 优化

    博主喜欢简洁大方的Hexo主题,看了不下100个主题之后,最终选择了 landscape-plus 主题(针对中国大陆地区,对Hexo官方主题landscape进行优化后的版本).更多Hexo主题资源 ...

随机推荐

  1. 在VisualGDB中配置预编译头加快编译速度

    今天是中秋佳节,但是写完已经是第二天凌晨了,还是祝大家中秋快乐! VS对C++的支持相较GCC太弱了,连续几个VS版本对C++的改进都很小.很少.对Cpper也许是一种痛,我们也许希望能使用VS的强大 ...

  2. EasyUI - 简介

    1. EasyUI : 简单的界面设计框架, 基于jQuery的UI插件, 主要用来设计网站的后台管理系统 2. EasyUI使用 : 将EasyUI提供的js文件和主题(themes)样式存放到项目 ...

  3. C/C++ warning C4251: class ... 需要有 dll 接口由 class“..” 的客户端使用

    { 在DLL编程中, 如果调用模版类, 则可能出现类似以下的错误: 1>xclock.h(29): warning C4251: “XClock::m_FileName”: class“std: ...

  4. [原创] delphi KeyUp、KeyPress、Keydown区别和用法,如何不按键盘调用事件

    KeyPress (Sender: TObject; var Key: Char);   当用户按下键盘上的字符键(字母,数字) 会触发该事件,功能键则不会(F1-F12,Ctrl,Alt,Shift ...

  5. Delphi 字符串函数 StrUtils(大全)

    引用单元: StrUtils; 首部 function AnsiResemblesText(const AText, AOther: string): Boolean; $[StrUtils.pas ...

  6. 知识整理:字符串hash

    字符串hash唯一用途是快速判断两字符串是否相等,但存在极小概率假阳性(本来不相等,但算法返回相等). 根本思想是把一个字符串转换为一个整数,要求相同的字符串,对应的这个整数相同,不同的字符串,对应的 ...

  7. 快速排序--Python实现

    快速排序算法:1.选择一个基准数2.小于基准数的放左边,大于基准数的放右边3.利用递归的方法针对左边的数据进行快速排序,再对右边的数据进行快速排序4.递归停止的条件:数组为空或者只有一个元素 时间复杂 ...

  8. 干货:Java技术栈18年02月精彩好文汇总

    一晃眼,一个月过去了,新年也过完了. 一晃眼,又老了一岁了,感觉新的一年压力更大了. 我们也该为这一个月的技术做做汇总了,错过的同学正好可以统一回顾看看,已经看过的同学也可以再温习一下.. Java技 ...

  9. C++之常量

    常量 **作用**:用于记录程序中不可更改的数据 C++定义常量两种方式 1. **\#define** 宏常量: #define 常量名 常量值 * ==通常在文件上方定义==,表示一个常量 2. ...

  10. VBA当中的时间日期函数

    目前还没发现VBA中有直接的函数能够将完整的年月日时分秒的文本格式日期转换成日期型日期的,那只能使用间接实现的办法.用dateserial + timeserial的方法.因为dateserial和t ...