返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: html教程 >

怎么根据浏览器分辨率不同调用不用的样式

2015-09-20 文章标签: css 浏览次数:
现在的浏览器和显示设备很多,电脑,平板,各种不同尺寸的显示器。那怎么制作兼容多平台的网站呢,现在有响应式网站,根据js来判断显示不同的css样式。见下面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码</title> 
<link href="" _fcksavedurl="""" rel="stylesheet" type="text/css" /> 
<script language="jscript">... 
if (window.navigator.userAgent.indexOf("MSIE")>=1) 
...{ 
var IE1024="style1.css"; 
var IE800="style2.css"; 
var IE1152="css1.css"; 
var IEother="css1.css"; 
ScreenWidth(IE1024,IE800,IE1152,IEother) 
}else...{ 
if (window.navigator.userAgent.indexOf("Firefox")>=1) 
...{ 
//如果浏览器为Firefox 
var Firefox1024="style1"; 
var Firefox800="style2.css"; 
var Firefox1152="css1.css"; 
var Firefoxother="css1.css"; 
ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother) 
}else...{ 
//如果浏览器为其他 
var Other1024="css1.css"; 
var Other800="css1.css"; 
var Other1152="css1.css"; 
var Otherother="css1.css"; 
ScreenWidth(Other1024,Other800,Other1152,Otherother) 


function ScreenWidth(CSS1,CSS2,CSS3,CSS4)...{ 
if ((screen.width == 1024) && (screen.height == 768))...{ 
setActiveStyleSheet(CSS1); 
}else...{ 
if ((screen.width == 800) && (screen.height == 600))...{ 
setActiveStyleSheet(CSS2); 
}else...{ 
if ((screen.width == 1152) && (screen.height == 864))...{ 
setActiveStyleSheet(CSS3); 
}else...{ 
setActiveStyleSheet(CSS4); 
}}} 

function setActiveStyleSheet(title)...{document.getElementsByTagName("link")[0].href=""+title;} 
</script> 
</head> 
<body> 
</body> 
</html>

关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。