JS判断分辨率调用CSS样式表

前言

有些网站为了区分电脑和手机而分别制作不同的页面并使之自动跳转，这在我看来本质上就是一种错误，因为WEB标准告诉我们，结构就是结构，表现就是表现，应该各司其职！

所以表现的事情，还是得交给样式表来解决，这个效果就是解决这种问题的，我们可以根据电脑和手机的不同分辨率，编写出不同的样式表，作为结构的HTML部分不需要变动，只需要判断出访客终端的分辨率并调用相对应的CSS样式表即可。

LINK标签

<link rel="stylesheet" rev="stylesheet" id="skin" type="text/css" media="all" />

JS部分

<script type="text/javascript">
var resolution_1024x768="css/default1.css"; //设置变量resolution_1024x768 样式：default1.css
var resolution_1280x1024="css/default2.css"; //设置变量resolution_1280x1024 样式：default2.css
var resolution_1600x900="css/default3.css"; //设置变量resolution_1600x900 样式：default3.css
if((screen.width==1024)&&(screen.height==768)){ 
document.getElementByIdx_x_x("skin").href=resolution_1024x768; //判断分辨率是1024x768调用default1.css
}else if((screen.width==1280)&&(screen.height==1024)){
document.getElementByIdx_x_x("skin").href=resolution_1280x1024; //判断分辨率是1280x1024调用default2.css
}else if((screen.width==1600)&&(screen.height==900)){
document.getElementByIdx_x_x("skin").href=resolution_1600x900; //判断分辨率是1600x900调用default3.css
}else{
document.getElementByIdx_x_x("skin").href=resolution_1024x768; //否则 调用default1.css
}
</script>

使用说明

１、以上两段代码都在</head>之前插入即可；
2、要注意保证CSS样式表的路径准确；
3、可按照代码格式，继续添加其它不同的样式表。