匹配PC和移动端

方法1:

 1 var browser={
 2     versions:function(){
 3         var u = navigator.userAgent, app = navigator.appVersion;
 4                 return {//移动终端浏览器版本信息
 5                     trident: u.indexOf(‘Trident‘) > -1, //IE内核
 6                     presto: u.indexOf(‘Presto‘) > -1, //opera内核
 7                     webKit: u.indexOf(‘AppleWebKit‘) > -1, //苹果、谷歌内核
 8                     gecko: u.indexOf(‘Gecko‘) > -1 && u.indexOf(‘KHTML‘) == -1, //火狐内核
 9                     mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否为移动终端
10                     ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
11                     android: u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1, //android终端或者uc浏览器
12                     iPhone: u.indexOf(‘iPhone‘) > -1 || u.indexOf(‘Mac‘) > -1, //是否为iPhone或者QQHD浏览器
13                     iPad: u.indexOf(‘iPad‘) > -1, //是否iPad
14                     webApp: u.indexOf(‘Safari‘) == -1 //是否web应该程序,没有头部与底部
15                 };
16             }(),
17             language:(navigator.browserLanguage || navigator.language).toLowerCase()
18         }
19         if(browser.versions.mobile){
20             if(browser.versions.iPad){
21                  window.location="http://www.baidu.com";
22             }else if(browser.versions.iPhone){
23                window.location="http://www.baidu.com";
24             }else if(browser.versions.android){
25                window.location="http://www.baidu.com";
26             }else if(browser.versions.webKit){
27                 window.location="http://www.qq.com";
28             }
29         }
30         else{
31             window.location="http://www.qq.com";
32         }
33     </script>

方法2:

 1 function IsPC()
 2         {
 3                    var userAgentInfo = navigator.userAgent;
 4                    var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
 5                    var flag = true;
 6                    for (var v = 0; v < Agents.length; v++) {
 7                        if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
 8                    }
 9                    return flag;
10         }
11         var browser=IsPC();
12         if(browser){
13             window.location="http://www.qq.com";
14         }else{
15             window.location="http://www.qq.com";
16         }
时间: 2024-11-18 09:19:41

匹配PC和移动端的相关文章

PC和移动端浏览器同步测试工具Browsersync使用介绍

在移动端网页开发中,总是因为不方便调试,导致各种问题不容易被发现.但是现在有了Browsersync,一切都解决了. 不熟悉的同学可以看看Browsersync的官方网站Browsersync中文网. 五分钟快速入门 1.使用Browsersync前需要安装node.js.详细的安装过程可参见windows 下安装nodejs 2.安装Browsersync.打开一个终端窗口,运行以下命令:npm install -g browser-sync 3.启动 BrowserSync. 如果您想要监听

前端判断用户请求是PC还是移动端

链接:https://www.zhihu.com/question/20004700/answer/13678113 第一步先在服务器端使用User Agent判断,先匹配出移动设备,这一步可以统计User Agent列表(可通过网站访问日志获取或者使用自己的设备收集),写出匹配设备的正则表达式(比如iPhone/Touch系列的匹配规则是/iPhone OS/i,如果要适配系统版本号,规则会更复杂),根据匹配结果做对应的网站版本输出. 需要注意的是在智能手机在移动CMWAP接入方式下User-

堆叠相冊效果,兼容pc和移动端

在手机端,堆叠效果的相冊是比較常见的一种图片展示方式,每一个人的思路可能会有一些不同,实现的方法不同. 本篇博客主要是分享下我的实现方法.欢迎大家提出建议,指出我的不足,先3Q啦~ 先看一下终于的效果图: 思路和原理分析: 1.首先是布局上的问题.默认显示五张错位图片,剩下的图片遮挡在第五张图片的背后.错位使用的是css3的transform的属性,使用rotate属性值.对显示的五张图片进行不一样的旋转. 2.js实现上的问题. (1)推断移动端和pc端.相应兼容使用mouse事件还是touc

textarea的placeholder属性内容折行显示(PC和移动端端)

1.PC端折行方法 placeholder="字体 字体" 可以使其折行显示   2.移动端折行方法 webkit内核 textarea::-webkit-input-placeholder:after{ display:block; content:"[email protected] \A line#";/* \A 表示换行 */ color:red; }; 火狐 textarea::-moz-placeholder:after{ content:"[

【java】服务器端获取用户访问的URL/用户IP/PC还是移动端

@RequestMapping(value="/test") @ResponseBody public void test1(HttpServletRequest request,Questionnaire quest,String questOptions){ String ipAddress = null; if (request.getHeader("x-forwarded-for") == null) { ipAddress = request.getRem

MVC下判断PC和移动端

MVC下的PC端和移动端,其实没区别,写法都一样,只是有两点才改变了它们 第一点:就是单击这个页面任何地方的时候判断是移动端还是客户端: 第二点:新建手机端区域Areas(简单来说:Areas就相当于小的一个运行机制也有控制器-视图-和路由地址),Moble(手机端存放的地方) :MVC运行的机制简单来说就是- 控制器-主页面-是否模板页-返回单击的页面 :关键点就在这个模板页里面(_layout)以及自带的js, :当我们运行到了(_layout)这里的时候就要判断是否为PC还是手机端,别问我

控制容器文字行数(pc和 移动端)

写在前面的话: 对于文字的单行以及多行显示,应该是经常用到的一个功能了,看下文吧~ pc 端: 1. 单行限制(兼容所有浏览器)   这里加了一个 鼠标移入时显示全部 的效果: .p2{ border: 1px solid #000; width: 206px; white-space:nowrap; overflow: hidden; text-overflow:ellipsis; } .p2:hover{ white-space: normal; overflow: visible; } <

如何使用fiddler抓取https请求(PC和移动端)

最近做一个抓取移动端app接口,并执行评论,收藏的接口功能测试.愁的失眠,怎么搞/(ㄒoㄒ)/~~ 老思路,第一步还是要用fiddler来帮忙获取接口信息! 一.基本的抓取http请求设置: 1.cmd/ipconfig获取本机ip地址 2.手机开启wifi,设置代理,服务器为:本机ip地址,端口号:8888 3.fiddler设置允许远程连接(满大街都是,自己搜) 4.打开app,点击操作,抓包! oh,shit!  竟然抓不到,什么鬼! 仔细一想我的这里基本都是https连接,无奈,百度,重

堆叠相册效果,兼容pc和移动端

在手机端,堆叠效果的相册是比较常见的一种图片展示方式,每个人的思路可能会有一些不同,实现的方法不同. 本篇博客主要是分享下我的实现方法,欢迎大家提出建议,指出我的不足,先3Q啦~ 先看一下最终的效果图: 思路和原理分析: 1.首先是布局上的问题.默认显示五张错位图片,剩下的图片遮挡在第五张图片的背后.错位使用的是css3的transform的属性,使用rotate属性值,对显示的五张图片进行不一样的旋转. 2.js实现上的问题. (1)判断移动端和pc端,对应兼容使用mouse事件还是touch