JS判断移动端访问设备并加载对应CSS样式_javascript技巧

JS判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的)

复制代码 代码如下:

// 判断是否为移动端运行环境

if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){

if(window.location.href.indexOf("?mobile")<0){

try{

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){

// 判断访问环境是 Android|webOS|iPhone|iPod|BlackBerry 则加载以下样式

setActiveStyleSheet("style_mobile_a.css");

}

else if(/iPad/i.test(navigator.userAgent)){

// 判断访问环境是 iPad 则加载以下样式

setActiveStyleSheet("style_mobile_iPad.css");

}

else{

// 判断访问环境是 其他移动设备 则加载以下样式

setActiveStyleSheet("style_mobile_other.css");

}

}

catch(e){}

}

}

else{

// 如果以上都不是,则加载以下样式

setActiveStyleSheet("style_mobile_no.css");

}

// 判断完毕后加载样式

function setActiveStyleSheet(filename){document.write("<link href="+filename+" rel=stylesheet>");}

加载页面

复制代码 代码如下:

<script type="text/javascript">
if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
if(window.location.href.indexOf("?mobile")<0){
try{
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
window.location.href="手机页面";
}else if(/iPad/i.test(navigator.userAgent)){
window.location.href="平板页面";
}else{
window.location.href="其他移动端页面"
}
}catch(e){}
}
}
</script>

时间: 2024-09-29 16:02:12

JS判断移动端访问设备并加载对应CSS样式_javascript技巧的相关文章

js判断移动端是否安装某款app的多种方法_javascript技巧

本文实例讲解了js判断移动端是否安装某款app的多种方法,分享给大家供大家参考,具体内容如下 第一种方法: 一:判断是那种设备 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 二:安卓设备:原理:判断是否认识这个协议,认识则直接跳转,不认识

js点击文本框后才加载验证码实例代码_javascript技巧

经常到各大网站去留言或者发帖的朋友应该知道现在很多网站的留言地方的验证码不是直接显示的.而是在点击验证码输入框之后才会显示出来验证码的.下面作者也总结了一篇关于如何利用js实现点击文本框然后再加载验证码的效果的. 废话不多说了,下面是具体的实现代码. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title

javascript判断移动端访问设备并解析对应CSS的方法_javascript技巧

本文实例讲述了javascript判断移动端访问设备并解析对应CSS的方法.分享给大家供大家参考.具体分析如下: javascript判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的): 复制代码 代码如下: // 判断是否为移动端运行环境  if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel

h5页面用slide滑动为什么加载的css样式过不来,每次得刷新一次才能过去

问题描述 h5页面用slide滑动为什么加载的css样式过不来,每次得刷新一次才能过去 h5页面用slide滑动为什么加载的css样式过不来,每次得刷新一次才能过去 解决方案 http://www.jb51.net/article/40960.htm

js实现加载更多功能实例_javascript技巧

项目的一个前端页面展示已购买商品时,要求能下拉加载更多.关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方定义的方法使用,用起来总感觉很不顺心.再加上iscroll.js本身并没有集成加载更多的功能,需要进行自行扩展.想继续使用iscroll.js实现加载更多功能的,上面给的链接可以看看. h5项目里需要实现简单的分页功能,由于是移动端,考虑用『加载更多』会更好,而不是PC端

pace.js页面加载进度条插件_javascript技巧

本文简单介绍插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容IE8以上的所有主流插件,而且其强大之处在于,你还可以引入加载进度条的主题样式,你可以选择任意颜色和多种动画效果(例如简约.闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果),如果你擅长修改css动画,那你就可以做出无限种可能性的动画,为你的网站增添个性化特色! 调用方法: 引入Pace.j

浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结_javascript技巧

这是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道require,seajs的用法(AMD,CMD用法),所以没有加入使用语法. 1.为何而生:  这三个规范都是为javascript模块化加载而生的,都是在用到或者预计要用到某些模块时候加载该模块,使得大量的系统巨大的庞杂的代码得以很好的组织和管理.模块化使得我们在使用和管理代码的时候不那么混乱,而且也方

js 判断脚本加载完毕的代码_javascript技巧

复制代码 代码如下: if(this.isIE) { js.onreadystatechange=function(){if(js.readyState=="loaded" || js.readyState=="complete") callback();} }else{js.onload=function(){callback();}} js.onerror=function(){alert('Not Found (404): '+src)}//chrome JS

js或者jquery判断图片是否加载完成实现代码_javascript技巧

网页中有时候需要获得图片的宽度和高度,来定义某些大小,可是这个是需要从服务端请求图片,下载到本地才能够得到的,有些js或者jquery代码在还没有加载完图片时就执行了.怎么办呢? jquery提供一个方法: 复制代码 代码如下: 01.$("").load(function(){...}); 其中选择器是图片的id或class,function里面的方法就是回调函数,在图片加载完成后执行,但是我试验了很多,压根儿不是那么回事,正确的解决方法是: 用js的onload方法: 复制代码 代