Question

怎么让浏览器根据不同分辨率加载不同的js文件或者函数,类似于css的@media的

要做一个自适应的网页,有很多js的函数,现在想根据不同分辨率加载不同的js文件或者函数,类似于css的@media,让不同的分辨率调用不同的js文件或函数去覆盖之前的js文件或函数,
不能是异步执行的,新的js文件或方法加载进来之后,旧的要失效,谁有办法?

Answer 1

可以判断当前屏幕分辨率，然后再给予对应的css文件路径，如：
html：
<link rel="stylesheet" type="text/css" id="css">
js：
window.onload = function(){
if((screen.width == 1024) && (screen.height == 768)){
document.getElementById('css').href = '1.css';
}else if ((screen.width == 800) && (screen.height == 600)){
document.getElementById('css').href = '2.css' ;
}else{
document.getElementById('css').href = '3.css';
}
}
screen.width是当前屏幕分辨率的宽度，screen.height是当前屏幕分辨率的高度

Answer 2

通过js判断，"屏幕分辨率为："+screen.width+"*"+screen.height

追问

这代码只是判断设备屏幕大小的吧,但如果用户不使用最大化来浏览网页呢,该如何按照他把浏览器拉到多少大小而条用不同的js呢

追答

如果你用jquery 用$(window).height();和$(window).width()
js需要写兼容！你还是先用jq吧