hexo next主题中关于pc端点击链接没问题,移动端点击链接页面不显示。
个人博客: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端点击链接没问题,移动端点击链接页面不显示。的更多相关文章
- hexo next主题中遇到的关于require的timeout的问题。Uncaught Error: Load timeout for modules:
个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景 报错:Uncaught Error: L ...
- .Net MVC中访问PC网页时,自动切换到移动端对应页面
随着移动端的流行,越来越的网站,除了提供PC网页之外,也提供了移动端的H5页面,手机在访问www.xxx.com的时候,能自动跳转到mobile.xxx.com.网上很多在实现时也能使用JS直接进行跳 ...
- hexo next 主题 : 实现点击跳转到文章的时候文章的页面自动实现滚轮效果,向下滚动到阅读的位置。
个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景: 博主的博客希望实现能够在点击到某个文章 ...
- hexo next主题深度优化(十一),next主题中加入scrollReveal.js,让文章随着鼠标的滚动,出现点小动作。
文章目录 效果 scrollReveal简单介绍以及简单操作 参考文档: next主题中加入scrollReveal 给article标签添加属性 给底部的不蒜子添加属性 本地引入依赖并且编写启动函数 ...
- Hexo next主题下添加天气插件
最近在优化hexo 新搭建的博客,想给博客添加一个天气插件,奈何找了很久也没发现,好不容易发现一个天气插件 心知天气:https://www.seniverse.com/widget/get 运气不好 ...
- hexo next主题深度优化(一),加入pjax功能。
文章目录 背景: 进入正题 pjax初体验--instantclick 真正的pjax 第一步 第二步 第三步 第四步 专门基于hexo next主题的pjax(将丢失的js效果重现) 将下面讲到的提 ...
- Hexo、主题、部署上线
Hexo.主题.部署上线 安装Hexo git和nodejs安装好后,就可以安装hexo了,你可以先创建一个文件夹MyBlog,用来存放自己的博客文件,然后cd到这个文件夹下(或者在这个文件夹下直接右 ...
- ASP.NET在主题中添加CSS文件
ASP.NET在主题中添加CSS文件 在ASP.NET中,可以使用CSS来控制页面上HTML元素和ASP.NET控件的皮肤.如果在主题文件夹中添加了CSS文件,则在页面应用主题时也会自动应用CSS. ...
- Hexo 官方主题 landscape-plus 优化
博主喜欢简洁大方的Hexo主题,看了不下100个主题之后,最终选择了 landscape-plus 主题(针对中国大陆地区,对Hexo官方主题landscape进行优化后的版本).更多Hexo主题资源 ...
随机推荐
- 【RabbitMQ】六种模式与SpringBoot整合
添加rabbitmq的依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifac ...
- 「题解」:07.16NOIP模拟T1:礼物
问题 A: 礼物 时间限制: 1 Sec 内存限制: 256 MB 题面 题目描述 夏川的生日就要到了.作为夏川形式上的男朋友,季堂打算给夏川买一些生 日礼物. 商店里一共有种礼物.夏川每得到一种礼 ...
- hadoop的基准测试
hadoop的基准测试 实际生产环境当中,hadoop的环境搭建完成之后,第一件事情就是进行压力测试,测试我们的集群的读取和写入速度,测试我们的网络带宽是否足够等一些基准测试 测试写入速度 向HDFS ...
- js 彻底理解回调函数
一.前奏 在谈回调函数之前,先看下下面两段代码: 不妨猜测一下代码的结果. function say (value) { alert(value); } alert(say); alert(say(' ...
- document.body / document.ducumentElement /等获取高度和宽度的区别
document.body / document.ducumentElement /等获取高度和宽度的区别 <!DOCTYPE html> <html> <head la ...
- 秒懂机器学习---k临近算法(KNN)
秒懂机器学习---k临近算法(KNN) 一.总结 一句话总结: 弄懂原理,然后要运行实例,然后多解决问题,然后想出优化,分析优缺点,才算真的懂 1.KNN(K-Nearest Neighbor)算法的 ...
- 得益于AI,这五个行业岗位需求将呈现显著增长趋势
得益于AI,这五个行业岗位需求将呈现显著增长趋势 人工智能与人类工作是当下许多人津津乐道的一个话题,而讨论的重点大多是围绕在"未来人工智能会不会抢走我们的工作"这个方面.本文作者 ...
- idea 启动异常xxxx.local: nodename nor servname provided, or not known
在host文件里面新增配置: 127.0.0.1 xxxx.local localhost 原文地址:https://www.jianshu.com/p/12e01fa9c69c
- 剑指offer——31序列化二叉树
题目描述 请实现两个函数,分别用来序列化和反序列化二叉树 二叉树的序列化是指:把一棵二叉树按照某种遍历方式的结果以某种格式保存为字符串,从而使得内存中建立起来的二叉树可以持久保存.序列化可以基于先 ...
- Android Telephony分析(四) ---- TelephonyManager详解
前言 TelephonyManager主要提供Telephony相关信息的查询/修改功能,以及Phone状态监听功能,封装的方法主要是提供给APP上层使用.TelephonyManager.java ...