利用fancybox轻松应对百度移动落地页检测不通过的情况

发布时间:2021-01-18 作者:安阳博客网 所属分类:程序代码

随着移动时代的到来,移动网站也逐渐多了起来,甚至有移动流量逐渐赶超PC流量的势头,同样的移动网站的流量来源普遍来源于百度,而在百度站长后台移动落地页检测时会发现虽然移动网站看似规整,但经过检测后会发现百度并不认可,提示百度移动落地页检测:您的页面可能存在图片不可全屏查看,全屏后不可缩放/左右滑动的问题,影响落地页,许多站长发现这一情况第一时间也是一头露水,为何我的网站挺漂亮的呀,为什么就是没有通过检测,如果放任不管,会不会对排名有所影响呢,如果修改那么到底又该怎样来应对这一问题呢?其实对于这一普遍情况解决起来还是很轻松地,甚至只需几行代码就可以轻松应对,那就是利用fancybox轻松应对百度移动落地页检测不通过的情况!

fancybox是用于在Mac样式的“灯箱”中显示图像,html内容和多媒体的工具,该工具漂浮在网页的顶部,它是使用jQuery库构建,可以显示图像、HTML元素、SWF电影、iframe和Ajax请求,通过fancybox描述我们可以看出来,需要jquery的支持,首先我们需要在</head>之前引入fancybox的CSS样式,使用七牛公共CDN资源可以使得网站速度大大提升.

<link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.css" />

添加后为每个图像标签添加图像链接,从而触发fancybox事件,显示灯箱效果代码类似于.

<div class="cont">
<a href="https://img04.sogoucdn.com/app/a/100520146/c73c185a132e1d4abac74eb4df80f472">
<img src="https://img04.sogoucdn.com/app/a/100520146/c73c185a132e1d4abac74eb4df80f472">
</a>
<a href="https://img01.sogoucdn.com/app/a/100520146/924a06316a306c452e9dd3a1043c37fe">
<img src="https://img01.sogoucdn.com/app/a/100520146/924a06316a306c452e9dd3a1043c37fe">
</a>
<a href="https://img03.sogoucdn.com/app/a/100520146/48becb7ee98acfa2a687817cfa12955c">
<img src="https://img03.sogoucdn.com/app/a/100520146/48becb7ee98acfa2a687817cfa12955c">
</a>
</div>

在</body>之前添加所需JS文件

<script src="http://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script>
$(function () {
	$('.cont').find('img').each(function () {
		var _this = $(this);
		var _src = _this.attr("src");
		_this.wrap('<a data-fancybox="images" href="' + _src + '"></a>');
	})
})		
</script>

之后保存,并在后台生成网页,刷新缓存,重新使用站长工具的移动落地页检测功能发现 完全符合落地页要求,至此利用fancybox轻松应对百度移动落地页检测不通过的情况.