微客导航 » 文章资讯 » 判断iOS、Android以及PC端的示例代码

判断iOS、Android以及PC端的示例代码

2023-09-05 17:59:04 310

前言

我们在做移动端时，在跨平台、浏览器、移动设备兼容的时候,要根据设备、浏览器做特定调整，想起用navigator.userAgent来对浏览器类型进行判断，查了点资料，在这里总结下

还有一个就是移动端的缩放问题，在meta标签中进行设置，对部分浏览器进行强制性的限制

1.navigator的一些常用属性

navigator为window对象的一个属性，指向了一个包含浏览器相关信息的对象

navigator.appVersion浏览器的版本号
navigator.language浏览器使用的语言
navigator.userAgent浏览器的userAgent信息

其中userAgent属性是一个只读的字符串，声明了浏览器用于HTTP请求的用户代理头的值。

2.较常见的ios端、Android端及PC端的判断

简单点的

/*判断浏览器类型*/
letuserAgent=navigator.userAgent;
/*判断手机型号*/
letapp=navigator.appVersion;
/*Android终端*/
letisAndroid=userAgent.indexOf('Android');
/*ios终端*/
letisMac=!!userAgent.match(/\(i[^;]+;(U;)?CPU.+MacOSX/);

封装性的

/*判断各类型方法*/
constbrowser={
version:function(){
constuserAgent=navigator.userAgent;
return{
/*判断是否是ios*/
ios:!!userAgent.match(/\(i[^;]+;(U;)?CPU.+MacOSX/),
/*判断是否是Android*/
android:userAgent.indexOf('Android')>-1||userAgent.indexOf('Adr')>-1,

/*判断是否是移动端*/
mobilePhone:!!userAgent.match(/AppleWebKit.*Mobile.*/),

/*IE内核*/
trident:userAgent.indexOf('Trident')>-1,
/*opera内核*/
presto:userAgent.indexOf('Presto')>-1,
/*苹果、谷歌内核*/
webkit:userAgent.indexOf('AppleWebKit')>-1,
/*火狐内核*/
gecko:userAgent.indexOf('Gecko')>-1&&userAgent.indexOf('KHTML')==-1,


/*判断是否是IPone手机或者QQHD浏览器*/
iphone:userAgent.indexOf('iPhone')>-1,
/*判断是否是iPad*/
iPad:userAgent.indexOf('iPad')>-1,

/*判断是否是web应用程序(能够让用户完成某些特定任务的网站)，没有头部和底部*/
webApp:userAgent.indexOf('Safari'),
/*是否是微信*/
weixin:userAgent.indexOf('MicroMessenger'),
/*QQ*/
QQ:userAgent.match(/\sQQ/i)=='qq',
}
}(),
/*判断浏览器使用的语言:navigator.language除IE浏览器外的浏览器使用的语言，
*navigator.browserLanguageIE浏览器使用的语言
*/
browserLanguage:(navigator.language||navigator.browserLanguage).toLowerCase()
};
if(browser.version.ios||browser.version.android||browser.version.mobilePhone){
console.log('是移动端');
}

3.meta标签设置

如对浏览器进行强制全屏的设置（UC全屏），webapp模式等

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

返回顶部
3162201930
czq8825@qq.com

判断iOS、Android以及PC端的示例代码

热门推荐

随机推荐