前端获取手机及设备类型

更新日期: 2020-06-24 阅读: 2.5k 标签: 手机

虽然没难度,但是记录下来,方便后续无脑复制:


苹果APP类型

// iOS
isIPhone = (userAgent: string) => /iphone/i.test(userAgent);
isIPod = (userAgent: string) => /ipod/i.test(userAgent);
isIPad = (userAgent: string) => /iPad/i.test(userAgent);
public isIOS = (userAgent: string) => this.isIPhone(userAgent) || this.isIPod(userAgent) || this.isIPad(userAgent);

注:最新ipad pro版本是MAC系统,无法通过浏览器信息来区分ipad pro与MAC,详细浏览器信息:

 1 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (Khtml, like Gecko) Version/13.0.4 Safari/605.1.15 

已经有很多开发吐槽过,苹果的这个BUG:https://developer.apple.com/forums/thread/119186

所以,除非苹果修复这个设计问题,否则我们只能绕道规避。

目前大家区分ipad pro与MAC的方法是,判断设备是否支持触摸

1  isIPadPro = (userAgent: string) => /macintosh/i.test(userAgent) && navigator.maxTouchPoints > 1;


安卓类型

大部分安卓的浏览器信息都有android字段

// android
public isAndroid = (userAgent: string) => /android/i.test(userAgent);


微信浏览器

// 微信
public isWechat = (userAgent: string) => /micromessenger/i.test(userAgent);
public isAppWechat = (userAgent: string) => this.isWechat(userAgent) && !/windowswechat/i.test(userAgent);


是否是手机端

添加mobile作为补充,当然直接使用mobile问题也不大

// 手机
public isMobile = (userAgent: string) => this.isAndroid(userAgent) || this.isIOS(userAgent) || /mobile/i.test(userAgent);

完整代码(可直接复制,不谢):

declare type UserAgentProvider = {
isIOS: (userAgent: string) => void;
isAndroid: (userAgent: string) => void;
isMobile: (userAgent: string) => void;
isWechat: (userAgent: string) => void;
};

class Index implements UserAgentProvider {
// iOS
isIPhone = (userAgent: string) => /iphone/i.test(userAgent);
isIPod = (userAgent: string) => /ipod/i.test(userAgent);
isIPad = (userAgent: string) => /iPad/i.test(userAgent) || /Macintosh/i.test(userAgent);
isIPadPro = (userAgent: string) => /macintosh/i.test(userAgent) && navigator.maxTouchPoints > 1;
public isIOS = (userAgent: string) =>
this.isIPhone(userAgent) ||
this.isIPod(userAgent) ||
this.isIPad(userAgent)||
this.isIPadPro(userAgent);

// android
public isAndroid = (userAgent: string) => /android/i.test(userAgent);

// 手机
public isMobile = (userAgent: string) => this.isAndroid(userAgent) || this.isIOS(userAgent) || /mobile/i.test(userAgent);

// 微信
public isWechat = (userAgent: string) => /micromessenger/i.test(userAgent);
public isAppWechat = (userAgent: string) => this.isWechat(userAgent) && !/windowswechat/i.test(userAgent);
}

export default new Index();


本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!

链接: https://fly63.com/article/detial/9405

高清手机/电脑壁纸类网站推荐

经常就为了找一些分辨率高的壁纸而费尽心思,目前的手机端的壁纸分辨率也是参差不齐,质量高的数量少,数量多的质量差,今天就分享几个我感觉不错的壁纸(摄影)网站吧,可以勾选分辨率选择壁纸。

阻止h5手机点击图片会有查看大图的功能

在H5页面,多次点击img标签时,会弹出当前的图片(效果类似查看),再点击,恢复部分手机点击图片会出现只看该图的功能,这个是手机自己浏览器自带的功能,这个时候只要将图片的冒泡冒泡阻止掉就可以了。

js 判断手机是否全面屏

现在主流的全面屏已经占用很多的市场,那么通常开发会遇到些问题,比如要去根据普通屏或是全面屏做一些相应的展示,接下来我这边的需求是展示不同大小的图片

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!