新闻中心 网络推广 技术文档

根据屏幕尺寸不同调用不同的JS

时间:2020-02-11   来源:本站

作为一个网站建设者来说,特别是写前端的朋友,往往会遇到这样的一个问题。

那就是JS的兼容。

打个比方:

我在使用响应式框架的时候,菜单在手机端上的弹出效果需要调用jq-1.5.js,

但是在某个页面使用物效的时候,如果用JQ-1.5版本的话,就会导致这个效果失效。比如说放大镜效果,我们需要使用JQ-1.3.JS,但是实际上在PC端上,我们是可以不用使用JQ-1.5,只调用JQ-1.3也不会响应PC端上的使用。

对于大神级的人物来说,一般是直接修改JS中的代码,因为这种情况多是因为命名或者类重复引起来的。但是对于我们一般人来说,修改类这些太过于复杂和麻烦。不是很实用。

于是我们选择了另一条更为简单的方式来处理这个问题。

<script   type="text/javascript">

if (screen.width<768)

	document.write('<script type="text/javascript" src="JQ-1.3.JS"><\\/script>');

else

	document.write('<script type="text/javascript" src="JQ-1.5.JS"><\\/script>');

</script>

以上JS的解释为:当屏幕尺寸小于768的时候,调用JQ-1.3,当大于768的时候,调用JQ-1.5,当然了,我们如果是多尺寸调用不同的JS,多写几个IF语句就可以了,是不是很简单?

新闻推荐
龙华网站建设多少钱?
龙华网站建设多少钱?

大家好,这里是黑马视觉,今天我们来聊聊在深圳建一个网站需要多少钱?龙华网站建设需要多少钱?从所周知,...

龙华外贸网站建设必需知道的四大注意事项
龙华外贸网站建设必需知道的四大注意事项

在深圳有很多外贸公司,他们已经不满足于通过其他平台来引流,于是他们都需要建设一个自己自己的外贸网站,...

jq实现鼠标往下滚动页面,导航消失,往上滚动页面,导航显示。
jq实现鼠标往下滚动页面,导航消失,往上滚动页面,导航显示。

如何用JQ实现:鼠标往下滚动页面,导航消失,往上滚动页面,导航显示。废话不多说,直接上代码:<script...

解决HTML5的video视频标签不自动播放JS方法
解决HTML5的video视频标签不自动播放JS方法

先说问题:在做一个网站的时候,在电脑上测试视频可正常的自动播放,用谷歌浏览器的模拟器测试移动端也可以...

Top