Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >判断网页是通过PC端还是移动终端打开的

判断网页是通过PC端还是移动终端打开的

作者头像
德顺
发布于 2019-11-13 09:09:20
发布于 2019-11-13 09:09:20
5.5K01
代码可运行
举报
文章被收录于专栏:前端资源前端资源
运行总次数:1
代码可运行
通过判断打开设备,跳转不同页面,可以根据 User-Agent 来区分
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
} else {
    window.location.href = "";        //电脑
}

也可以执行其他操作:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    alert('您正在通过手机访问');
} else {
    alert("您在PC端访问");
}

JS判断客户端是否是iOS或者Android手机移动端:

通过判断浏览器的 userAgent,用正则来判断手机是否是ios和Android客户端。代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type="text/javascript">
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    alert('是否是Android:'+isAndroid);
    alert('是否是iOS:'+isiOS);
</script>

下面一个比较全面的浏览器检查函数,提供更多的检查内容,你可以检查是否是移动端(Mobile)、ipad、iphone、微信、QQ等。

第一种:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type="text/javascript">
    //判断访问终端
    var browser={
        versions:function(){
            var u = navigator.userAgent, app = navigator.appVersion;
            return {
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
                iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
                weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
                qq: u.match(/\sQQ/i) == " qq" //是否QQ
            };
        }(),
        language:(navigator.browserLanguage || navigator.language).toLowerCase()
    }
    //使用方法:
    //判断是否IE内核
    if(browser.versions.trident){ alert("is IE"); }
    //判断是否webKit内核
    if(browser.versions.webKit){ alert("is webKit"); }
    //判断是否移动端
    if(browser.versions.mobile||browser.versions.android||browser.versions.ios){
        alert("移动端"); 
    }
</script>

检测浏览器语言

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
currentLang = navigator.language;   //判断除IE外其他浏览器使用语言
if(!currentLang){//判断IE浏览器使用语言
    currentLang = navigator.browserLanguage;
}
alert(currentLang);

第二种:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent);  
    window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) {
    //alert(navigator.userAgent); 
    window.location.href ="Android.html";
} else {
    window.location.href ="pc.html";
};

也可以通过这样来适配,然后直接转跳到移动端页面:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function mobile_device_detect(url){
  var thisOS=navigator.platform;
  var os=new Array("iPhone","iPod","iPad","android","Nokia","SymbianOS","Symbian","Windows Phone","Phone","Linux armv71","MAUI","UNTRUSTED/1.0","Windows CE","BlackBerry","IEMobile");
  for(var i=0;i<os.length;i++){
    if(thisOS.match(os[i])){
      window.location.href=url;
    }
  }
  if(navigator.platform.indexOf('iPad') != -1){
    window.location.href=url;
  }
  var check = navigator.appVersion;
  if( check.match(/linux/i) ){
    if(check.match(/mobile/i) || check.match(/X11/i)){
      window.location.href=url;
    }
  }
}

参考文献:

判断是手机还是PC浏览器的方法(3)

JS判断客户端是否是iOS或者Android手机移动端

判断pc 网页打开的是手机还是电脑,跳转网址?(1)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-04-01),如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
js判断手机端和pc端
navigator对象有一个属性为userAgent,这是一个只读的字符串,声明了浏览器用于HTTP请求的用户代理头的值。所以我们可以通过判断navigator.userAgent里面是否包含某些值来判断。如下为userAgent的打印值。
用户1349575
2022/01/26
8.9K0
通过userAgent 属性来识别访问终端是pc还是移动端
这里使用userAgent属性来完成我们的需求,首先我们来认识一下userAgent这个属性:
kl博主
2023/11/18
3630
JavaScript判断终端
在我们进行前端开发的时候,我们经常会遇到浏览器兼容、手机系统兼容的问题,我们通常会想进各种办法来解决他们,比如CSS hack,下面的代码可以给大家提供一个新的思路,判别终端,根据终端的不同,我们可以进行不同的操作。
刘亦枫
2020/03/19
6320
JavaScript判断终端
JavaScript判断设备类型的实现
可以通过 JavaScript 来实现判断当前的设备类型:navigator 是 JavaScript 中的一个独立的对象,用于提供用户所使用的浏览器以及操作系统等信息,以 navigator 对象属性的形式来提供。所有浏览器都支持该对象。
前端老道
2022/03/29
3.8K0
根据js来判断手机是操作系安卓还是ios
平常开发很常见的功能,在移动端需要根据javaScript来判断手机是安卓还是ios进行应用市场跳转。
小周sir
2019/09/23
5.6K0
H5页面判断客户端是iOS或者Android并跳转对应链接唤起APP
每个客户端都会有自己的 UA (userAgent)标识,可以用 JavaScript 获取客户端标识。
德顺
2019/11/12
13.8K0
通过JavaScript实现不同设备间的跳转和加载CSS样式
通过JS判断访问设备并跳转对应HTML页面 <script type="text/javascript"> if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))) { window.location = "手机页面.html"; //移动端访问跳转页面 } else { window.location = "电脑页面.html"; //PC端访问跳转页面 } </sc
程序员纬度
2021/12/30
1.5K0
多种方式判断PC端,IOS端,移动端
1. 通过判断浏览器的userAgent,用正则来判断手机是否是IOS(苹果)和Android(安卓)客户端。
honey缘木鱼
2018/12/25
1.4K0
用beego进行onlyoffice document server的二次开发
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/79293263
hotqin888
2018/09/11
1.7K0
通过Js判断客户端为PC端还是手持设备
Js中获取浏览器信息字符串只要使用navigator.userAgent即可,这样我们再利用indexof来判断版本或其它信息了。
WindCoder
2018/09/20
7.8K0
2016.07 第4周 群问题分享
HTML+CSS CSS pixels与Device pixels有何区别? 2016.07.25~2016.07.29 核心概念 CSS pixels、Device pixels 问题解析 CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容 Device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色、亮度 等值的 CSS pixels在手机屏幕上占多大的位置,这不是固定的,这取决于很多属性。经过分析和总结,我们可以得出这么一条公式: 1 CSS pixels =
HTML5学堂
2018/03/13
8170
JavaScript判断浏览器内核,微信打开自动提示在浏览器打开
微信会屏蔽 URL 自定义的 scheme ,导致无法跳转手机中的浏览器。网上有一些工具类网站可以实现直接跳转浏览器,之后有机会我会整理一下。我们今天只讨论通过 JavaScript 判断是否在微信浏览器中打开,如果是则弹出提示,在浏览器中打开。
德顺
2019/11/19
4.6K0
Nginx区分PC或手机访问不同网站
近几年来,随着手机和pad的普及,越来越多的用户选择使用移动客户端访问网站,而为了获取更好的用户体验,就需要针对不同的设备显示出最合适的匹配,这样就是近年来流行的“响应式web设计”。 响应式web设计是一种纯前端技术js、css等实现的针对不同设备访问同一网址看到不同的布局,是页面内容更适合当前设备阅读。但这个不是本文的重点,重点还是放在nginx如何实现上来。 本文要讲的的是如何使用nginx区分pc和手机访问不同的网站,是物理上完全隔离的两套网站(一套移动端、一套pc端),这
小小科
2018/05/03
10.2K0
「移动端」前端常见知识点总结
HTML5地理位置API,允许js程序向浏览器询问用户的真实信息,移动端使用GPS获取的位置,非常精准。但是地理位置API的浏览器访问前总是会询问是否同意,如果同意的话就会获取到位置,否则获取不到。
呆呆
2021/09/30
1.1K0
判断移动端并跳转到m域名的代码
<script> function is_mobile() { var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|
皇上得了花柳病
2020/04/30
2.1K0
JavaScript 项目实战工具类
2、**重点内容生成6位数的单号** ``` generateMixed:function(){//生成6位数的单号 var Num = ""; for (var i = 0; i < 6; i++) { Num += Math.floor(Math.random() * 10); } return Num; } ``` **3、日期时间**
White feathe
2021/12/08
6060
js浏览器版本和移动端版本总结
今天俺跟大家分享一个工具方法,用来判断浏览器内核版本信息,判断是否会移动端,判断是否为ios。
IT工作者
2022/02/07
2.2K0
Javascript判断设备类型,检测是否为微信打开
代码实现如下 var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 pres
IT工作者
2022/01/28
1.6K0
分享前端开发常用代码片段
如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像。
前端教程
2018/07/27
1.3K0
分享前端开发常用代码片段
移动web开发中,好用的小方法
1.检查是否触屏设备 //此方法在chrome模拟手机的模式中似乎无效,但是在iphone中是有效的,在安卓中待测试 function isTouchDevice() { return ('ontouchstart' in document.documentElement); } 2.检测更多的设备和浏览器信息,靠的是ua信息 var browser={ versions:function(){ var u = navigator.userAgent, app = n
黒之染
2018/10/19
1.1K0
相关推荐
js判断手机端和pc端
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验