<!DOCTYPE html>
<html>
<head>
<title>JS判断设备类型,应用不同css文件</title>
<link rel="stylesheet" type="text/css" href="style_A.css" />
</head>
<body>
<script type="text/javascript">
var browser = {
versions: (function () {
var u = navigator.userAgent,
app = navigator.appVersion;
//移动设备浏览器版本信息
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,//android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1,//是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1,//是否iPad
webApp: u.indexOf('Safari') == -1,//是否web应该程序,没有头部与底部
};
})(),
language: (
navigator.browserLanguage || navigator.language
).toLowerCase(),
};
if (browser.versions.mobile || browser.versions.ios
|| browser.versions.android || browser.versions.iPhone
|| browser.versions.iPad ) {
cssChange();
}
function cssChange() {
var link = document.getElementsByTagName('link')[0];
//PC端应用的样式文件:style_A.css
// alert('当前应用样式文件是:'+link.getAttribute('href'));
link.setAttribute('href', 'style_B.css');
//Mobile端应用样式文件:style_B.css
// alert('当前应用样式文件是:'+link.getAttribute('href'));
}
</script>
</body>
</html>
JS判断设备类型,应用不同css文件
最新推荐文章于 2024-07-23 16:33:08 发布