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

德顺

发布于 2019-11-13 17:09:20

5K0

发布于 2019-11-13 17:09:20

通过判断打开设备，跳转不同页面，可以根据 User-Agent 来区分：

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?=?"";????????//电脑
}

也可以执行其他操作：

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客户端。代码如下：

<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等。

第一种：

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

检测浏览器语言

currentLang?=?navigator.language;???//判断除IE外其他浏览器使用语言
if(!currentLang){//判断IE浏览器使用语言
????currentLang?=?navigator.browserLanguage;
}
alert(currentLang);

第二种：

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";
};

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

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 删除

android