JS判断移动端访问设备并加载对应CSS样式
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>
JS判断移动端访问设备并加载对应CSS样式的更多相关文章
- JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)
//平台.设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platfor ...
- 用jquery判断当前显示器的分辨率,加载不同CSS
<link rel="stylesheet" type="text/css" id="css"><script langu ...
- abp架构中加载公共css样式表和公共js的文件目录位置
src\shared\helpers\LocalizedResourcesHelper.ts
- 根据显示器的分辨率,加载不同CSS样式表
<link rel="stylesheet" type="text/css" id="css"><script langu ...
- js判断移动端是否安装某款app的多种方法
本文实例讲解了js判断移动端是否安装某款app的多种方法,分享给大家供大家参考,具体内容如下 第一种方法: 一:判断是那种设备 ? || u.indexOf(; //android终端或者uc浏览器 ...
- 移动端实现上拉加载更多(使用dropload.js vs js)
做下笔记,:移动端实现上拉加载更多,其实是数据的分段加载,在这里为了做测试我写了几个json文件作为分段数据: 方式一:使用dropload.js; 配置好相关参数及回调函数就可使用:代码如下 var ...
- JS 判断移动端与PC端
js判断移动端与pc端 这里介绍下使用device.js插件来判断移动端设备 地址:https://github.com/matthewhudson/device.js 示例: 1 2 3 4 5 ...
- js 判断pc端或手机端
<script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...
- JS判断移动端还是PC端(改造自腾讯网) 仅用于宣传动画,下载页等
JS判断移动端还是PC端(改造自腾讯网 http://www.qq.com/) 本脚本仅用于宣传动画,下载页( ipad 也算pc端)等, ionic 用 ionic.platform 即可( io ...
随机推荐
- Linux系统下Dubbo安装的详细教程
Linux系统下Dubbo安装的详细教程 1.Dubbo的简介 Dubbo是 [1] 阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 [ ...
- c#动态类转json,再由json转xml
直接上代码了,多说无意了. using System; using System.Collections; using System.Collections.Generic; using System ...
- 38 多线程(十)——volatile 数据同步
在多线程并发的情况下,同一个变量被多个线程调用,那修改的数据就不会每分每秒保持一致.例如,对于某个变量a,线程1对它进行一套操作,线程2又对它进行另一套操作,但如果cpu太忙了,太忙了,假设cpu都用 ...
- InfoGan笔记
InfoGAN: Interpretable Representation Learning by Information Maximizing Generative Adversarial Nets ...
- spring boot + vue实现图片上传及展示
转载:https://blog.csdn.net/weixin_40337982/article/details/84031778 其中一部分对我很有帮助 转载记录下 首先,html页面: <! ...
- 导出Excel的2个方法
导出到Excel的两种方法 第一种: 1.首先创建Excle模板,另存为 “xml”文件.使用记事本等编辑软件打开文件的代码.然后另存为视图文件“Export.cshtml”; 2.控制器操作 pub ...
- springboot笔记07——整合MyBatis
前言 Springboot 整合 MyBatis 有两种方式,分别是:"全注解版" 和 "注解.xml混合版". 创建项目 创建Springboot项目,选择依 ...
- JQ分页的使用
<script src="../js/pageMe.js"></script> <script src="../js/comjq.js&qu ...
- svg实现圆环进度条
开源实现:https://github.com/lugolabs/circles 自行实现:圆环与svg画布间剩的空间太多. <!DOCTYPE html> <html> &l ...
- HTML Marquee跑马灯
Marquee是html的标签,所有的主流浏览器都能兼容,用于创建文字滚动. 来介绍下标签的属性 滚动方向 direction <!--滚动方向 direction 4个值 up down le ...