jQuery判断浏览器是移动端还是电脑端自动跳转
一个段小代码，同一个网站针对移动端查看和电脑端查看跳转不同的页面。
首先加载jQuery文件。
$(function(){
var MobileUA = (function() {
var ua = navigator.userAgent.toLowerCase();
var mua = {
: /ipod|iphone|ipad/.test(ua), //iOS
IPHONE: /iphone/.test(ua), //iPhone
IPAD: /ipad/.test(ua), //iPad
ANDROID: /android/.test(ua), // Device
WINDOWS: /windows/.test(ua), //Windows Device
TOUCH_DEVICE: ('ontouchstart' in window) || /touch/.test(ua), //Touch Device
MOBILE: /mobile/.test(ua), //Mobile Device (iPad)
ANDROID_TABLET: false, //Android Tablet
WINDOWS_TABLET: false, //Windows Tablet
TABLET: false, //Tablet (iPad, Android, Windows)
SMART_PHONE: false //Smart Phone (iPhone, Android)
mua.ANDROID_TABLET = mua.ANDROID && !mua.MOBILE;
mua.WINDOWS_TABLET = mua.WINDOWS && /tablet/.test(ua);
mua.TABLET = mua.IPAD || mua.ANDROID_TABLET || mua.WINDOWS_TABLET;
mua.SMART_PHONE = mua.MOBILE && !mua.TABLET;
//SmartPhone
if (MobileUA.SMART_PHONE) {
// 移动端链接地址
document.location.href = 'https://www.aaa.com/wap/index.html';您的位置：
根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS
发布者: moke |
php、asp、js判断客户端输出对应的样式
------------------- 1.媒体查询方法在 css 里面这样写 --------------------
@media screen and (min-width: 320px) and (max-width: 480px){
在这里写小屏幕设备的样式
@media only screen and (min-width: 321px) and (max-width: 1024px){
这里写宽度大于321px小于1024px的样式(一般是平板电脑)
@media only screen and (min-width: 1029px){
这里写pc客户端的样式
------------------- 2.用js根据客户端输出对应样式 --------------------
/*事实上用asp、php后台判断更保险，js在前端，有可能被用户禁止*/
function loadCSS() {
&if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|wOSBrowser|BrowserNG|WebOS)/i))) {
&& &&& &document.write('&link href="css/pad-phone.css" rel="stylesheet" type="text/css" media="screen" /&');
&& &else {
&& &&& &document.write('&link href="css/pc.css" rel="stylesheet" type="text/css" media="screen" /&');
loadCSS();
------------------- 3.既判断分辨率，也判断浏览器-------------------
应E.Qiang提议,重新完善代码，使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码。
代码如下：
&SCRIPT LANGUAGE="JavaScript"&
if (window.navigator.userAgent.indexOf("MSIE")&=1)
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";
ScreenWidth(IE1024,IE800,IE1152,IEother)
if (window.navigator.userAgent.indexOf("Firefox")&=1)
//如果浏览器为Firefox
var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";
ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
//如果浏览器为其他
var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
ScreenWidth(Other1024,Other800,Other1152,Otherother)
function ScreenWidth(CSS1,CSS2,CSS3,CSS4){
if ((screen.width == 1024) && (screen.height == 768)){
setActiveStyleSheet(CSS1);
if ((screen.width == 800) && (screen.height == 600)){
setActiveStyleSheet(CSS2);
if ((screen.width == 1152) && (screen.height == 864)){
setActiveStyleSheet(CSS3);
setActiveStyleSheet(CSS4);
function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="style/"+
var IE1024="";
var IE800="";
var IE1152="";
var IEother="";
引号里面分别填写，用户使用IE的时候并且分辨率为*600,要使用的css文件名.
var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";
引号里面分别填写，用户使用FF的时候并且分辨率为*600,要使用的css文件名.
var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";
引号里面分别填写，用户使用其他浏览器的时候并且分辨率为*600,要使用的css文件名.
不判断分辨率，只判断浏览器
实现根据浏览器类型自动调用不同CSS。
&SCRIPT LANGUAGE="JavaScript"&
if (window.navigator.userAgent.indexOf("MSIE")&=1)
//如果浏览器为IE
setActiveStyleSheet("default.css");
if (window.navigator.userAgent.indexOf("Firefox")&=1)
//如果浏览器为Firefox
setActiveStyleSheet("default2.css");
//如果浏览器为其他
setActiveStyleSheet("newsky.css");
function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="style/"+
如果浏览器为IE，则调用default.css
如果浏览器为Firefox，则调用default2.css
如果浏览器为其他，则调用newsky.css
前面即可。
只要求判断根据屏幕宽度选择不同的CSS样式表。
&script language=javascript&
if (screen.width == 800)
document.write('&link rel=stylesheet type="text/css" href="css800.css"&')
else {document.write('&link rel=stylesheet type="text/css" href="css1024.css"&')}
魔客吧温馨提示：如果你想搭建商城或者电子商务网站，那么到魔客吧的
频道看看吧，这里有很多的ecshop商城模板哦！
本文地址：
文章标题：
最新分享资源JS判断移动设备最佳方法 并实现跳转至手机版网页 | 设计达人
爱设计，爱分享。
JS判断移动设备最佳方法 并实现跳转至手机版网页
赞助商链接
我在开发的Magento或Wordpress主题时，通过都会制作手机版本，为了实现某个片段在手机端和桌面端不同功能，又或者如果是手机设备，就跳转到指定的网页上，那么这里就需要用到JS来做判断了，下面有一个简单的检测方法，经试验是可行的。
方法一：纯JS判断
使用这方法既简单，又实用，不需要引入jQuery库，把以下代码加入到&head&里即可。
&script type=”text/javascript”&
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location = “mobile.html”; //可以换成http地址
方法二：使用 Device.js 库
device.js 是一个用于检查设备用的插件，使用它你可以很方便的判断设备的操作系统，以及设备是纵向还是横向。
首先，我们下载Device.js
下载地址：
STEP 1: 引入 JS 文件
&script src=”device.min.js”&&/script&
STEP 2: 加入判断代码
&script type=”text/javascript”&
if(device.mobile()){
window.location = “shouji.html”;
//可以换成http地址
Device.js 方法有很多，若你想实现对某个设备的判断，要以根据以下代码来替换device.mobile()。
以上两种方法判断手机端都是很实用的，由其是电脑版网页和手机版网页分别用不同的网站域名时，使用该方法可以免去用户记2个域名烦恼！
参考阅读：
http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery
赞助商链接
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
艺术与审美入门之书
设计师必看
手机APP设计
新手推荐！
Web用户体验入门书籍
web前端&设计群当前位置： >
移动端整屏切换带判断横屏/竖屏状态JS代码
特效说明：
一款移动端整屏切换带判断横屏/竖屏状态JS代码网页特效，该JS代码带Loading加载动画，且判断设备屏幕横屏还是竖屏状态，鼠标拖动响应式全屏切换网页框架代码。（兼容测试：IE10、Firefox、Chrome、Opera、Safari、360等支持HTML5+CSS3主流浏览器）
使用方法：
1、调用CSS样式：
&link type=&text/css& rel=&stylesheet& href=&css/index.css& /&
2、调用JS插件代码：
&script src=&scripts/zepto.min.js&&&/script&
&script src=&scripts/parallax.js&&&/script&
&script src=&scripts/index.js&&&/script&
3、添加HTML代码：
将&!--效果html开始--&......&!--效果html结束--&之间的html和js代码；放在&body&&/body&之间。
一款纯CSS3实现世界地图热点击动画显示详情特效，点击标注点即可在页面上弹出一个文字提示框，用来说明该标注点在地图上的详细信息，如果你需要有一款带标注功能的地图应用，那么这款……
HTML5+svg手机图标菜单动画切换特效下载，该HTML5特效代码是一款适合移动端、手机端展开/收缩导航菜单特效。……
一款jQuery层叠展示导航菜单响应式网页框架下载，该网页框架源码是一款点击菜单按钮，各个子菜单会以卡片的形式堆叠排列在窗口中，点击相应的子菜单就会切换到相应的页面上。……
一款CSS3动画响应式全屏焦点图网页特效免费下载，纯CSS3+HTML实现移动端、手机端、PC端响应式全屏焦点图代码，响应式网站制作必备代码素材。……
一款jQuery响应式全屏动画菜单网站框架，通过点击页面侧边菜单，对应的页面加载时伴随着滑动过渡动画，还带进度条效果的。当然页面的加载是Ajax驱动的，整个加载过渡过程非常流畅，非常……
owl.carousel.js是一个强大、实用但小巧的jQuery图片幻灯片、图片列表特效插件，该JS特效代码提供了众多的参数、回调函数及自定义事件，所以它几乎可以满足你的所有要求。……
jQuery和CSS3单页倾斜分割布局幻灯片特效源码是一款非常有创意的基于jQuery和CSS3单页倾斜分割布局幻灯片特效的代码。该幻灯片特效将整个屏幕倾斜分割为两个部分，一部分用于展示图片，另一……
一款HTML5触屏滑动侧边栏导航菜单特效下载，该Bootstrap导航菜单特效是一款基于jquery+html5实现的兼容手机和PC端动画导航菜单插件，响应式网站建设必备代码素材。……
据中国互联网络信息中心(CNNIC)数据显示，截至2014年6月，中国移动互联网用户突破5.27亿，覆盖率达83.4%，首次超越传统电脑整体80.9%的使用率，成为第一大上网群体。 随着移动终端设备的智能……
一款响应式留言板添加和删除JS插件代码网页特效，PC端、移动端、手机端通用响应式JS留言系统插件，不依赖任何插件采用纯JS开发，简单易用。……
最新更新特效
本站关键词
科e互联版权所有
京ICP备号-1拒绝访问 | www.laozuo.org | 百度云加速
请打开cookies.
此网站 (www.laozuo.org) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(3fb8fef-ua98).
重新安装浏览器，或使用别的浏览器