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>

赞 (0)

相关推荐

  • 基于JavaScript实现移动端点击图片查看大图点击大图隐藏

    一.需求 点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css">

  • js如何判断用户是在PC端和还是移动端访问

    最近一直在忙我们团队的项目"咖啡之翼",在这个项目中,我们为移动平台提供了一个优秀的体验.伴随Android平台的红火发展.不仅带动国内智能手机行业,而且许多国内开发者也开始投身于Android移动终端的大浪潮中.如果很多互联网大浪潮你错过了.那么这个Android浪潮你绝对不能错过.目前我们为"咖啡之翼"已经开发了移动终端以及安卓客户端,大家使用Android或者IOS操作系统的手机,直接访问域名www.sygxy.cn即可观看移动终端效果.同时Android客户

  • 移动端点击态处理的三种实现方式

    前言 在开发移动端页面的时候,为了提高用户体验,通常会给被触控的元素加上一个效果来对用户的操作进行反馈.这种反馈主要有三种实现方式,有需要的朋友们下面来一起看看吧. 一.伪类:active :active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式.最常用于锚点<a href="#">这种情况,一般主流浏览器下也支持其他元素,如button等.在多按键的鼠标系统中,:active只适用于主按键,目前的大部分情况都是左键即主键. 该伪类下定义的CSS样式只在按下鼠

  • javascript实现移动端上的触屏拖拽功能

    javascript实现移动端上的触屏拖拽功能

    本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi

  • Javascript实现视频轮播在pc端与移动端均可

    Javascript实现视频轮播在pc端与移动端均可

    最近客户要求用Javascript实现视频轮播: 有兴趣的同学可以参开一下 下面写了一个程序实现视频轮播,pc端与移动端均可以实现, 但移动端,存在有一点bug; 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <met

  • 移动端点击图片放大特效PhotoSwipe.js插件实现

    PhotoSwipe插件能实现手机端点击图片全屏放大 再双击图片放大等功能 PhotoSwipe插件官方网站 http://www.photoswipe.com/ photoswipe之移动端图片放大查看,滑动切换下一张,图片保存到本地. <style> .pnav{margin-top:30px;text-align:center;line-height:24px; font-size:16px} .pnav a{padding:4px} .pnav a.cur{background:#00

  • jquery移动端TAB触屏切换实现效果

    我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目,如网易新闻等APP栏目切换.我们说的TAB一般由导航条和TAB对应的内容组成,切换导航条上的标签同时标签对应的内容也会跟着切换.本文将结合实例给大家介绍一个移动端TAB触屏切换效果. 我们准备一个TAB导航#pagenavi,里面包含TAB导航要切换的四个导航按钮,然后是切换的主体内容#slider,这里应该放置四个li与导航按钮对应,内容自定义. <div class="box-163css"> <ul id

  • jquery实现移动端点击图片查看大图特效

    jquery实现移动端点击图片查看大图特效

    本文的需求很简单:点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 具体实现代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof</title> <style type="text/css&quo

  • 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-

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

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

  • JS如何判断移动端访问设备并解析对应CSS

    复制代码 代码如下: // 判断是否为移动端运行环境 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.lo

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

    本文实例讲解了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实现移动端访问PC端页面时跳转到对应的移动端网页

    基于JS实现移动端访问PC端页面时跳转到对应的移动端网页

    不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,以下实现思路经过小编测试过,放心使用. 1.效果图 PC端访问显示: 移动端访问显示: 2.实现: 不考虑移动端搜索引擎优化的话,只需要通过JS判断是否移动端,然后确定是否跳转到指定页面就行了,主要JS如下: //判断是否移动端,如果是则跳转到指定的URL地址 function browserRedirect(url) { //只读的字符串,

  • 使用JS判断移动端手机横竖屏状态

    禁用用户自动缩放功能: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 判断横竖屏状态有两种方法:css判断.js判断 (一).css判断横屏还是竖屏 1.写在同一个css文件中 @media screen and (orientation: portrait) { /*竖屏 css*/ }

  • js判断移动端横竖屏视口检测实现的几种方法

    目录 1.不同视口的获取方法 2.JavaScript检测横竖屏 3.CSS检测横竖屏 4.meta标签属性设置 5.meta标签属性设置设置刘海屏&底部小黑条 1.不同视口的获取方法 // 获取视觉视口大小(包括垂直滚动条) let iw = window.innerWidth, ih = window.innerHeight; console.log(iw, ih); // 获取视觉视口大小(内容区域大小,包括侧边栏.窗口镶边和调整窗口大小的边框) let ow = window.outer

  • 用jQuery的AJax实现异步访问、异步加载

    用jQuery的AJax实现异步访问、异步加载

    本篇文章实现了用jQuery的AJax实现异步访问和异步加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下. [异步访问] 用一个例子用以说明:点击按钮,将input内用户输入的数据发送给服务端,并将结果返回给页面. 首先是html承载内容: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>AJax异步访问<

  • 原生js实现下拉刷新和上拉加载更多

    原生js实现下拉刷新和上拉加载更多

    本文实例为大家分享了js实现下拉刷新和上拉加载更多的具体代码,供大家参考,具体内容如下 1.下拉刷新 由于原生js太久不用了,这里列一下此处涉及到的前置知识点: 移动端触屏事件: touchstart(手指按下的一瞬间),touchmove(手指在屏幕上移动时),touchend(手指松开时) 手指在页面上的坐标: pageX,pageY 写之前首先要懂原理,下拉刷新的本质就是用户在页面顶部进行上拉动作时拉到一定的距离触发数据刷新. 大概需要做的几个点: 1.在手指按下时(touchstart)

  • javascript判断ie浏览器6/7版本加载不同样式表的实现代码

    关键点:1.对浏览器版本的判断:2.修改样式表路径 其中第二点也常用在实时修改网页模板.论坛风格的场合,实际上就是修改样式表路径来加载不同的样式表. 代码: 复制代码 代码如下: <script type="text/javascript"> var browser=navigator.appName var b_version=navigator.appVersion var version=b_version.split(";"); try{ //代

随机推荐