1、判断是移动还是 PC 设备
export const isMobile = () => {
if (
navigator.userAgent.match(
/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i,
)
) {
return 'mobile';
}
return 'desktop';
};
2、判断是否是苹果还是安卓移动设备
export const isAppleMobileDevice = () => {
let reg = /iphone|ipod|ipad|Macintosh/i;
return reg.test(navigator.userAgent.toLowerCase());
};
3、判断是否是安卓移动设备
export const isAndroidMobileDevice = () => {
return /android/i.test(navigator.userAgent.toLowerCase());
};
4、判断是 Windows 还是 Mac 系统
export const osType = () => {
const agent = navigator.userAgent.toLowerCase();
const isMac = /macintosh|mac os x/i.test(navigator.userAgent);
const isWindows =
agent.indexOf('win64') >= 0 ||
agent.indexOf('wow64') >= 0 ||
agent.indexOf('win32') >= 0 ||
agent.indexOf('wow32') >= 0;
if (isWindows) {
return 'windows';
}
if (isMac) {
return 'mac';
}
};
5、浏览器型号和版本
export const getExplorerInfo = () => {
let t = navigator.userAgent.toLowerCase();
return 0 <= t.indexOf("msie")
? {
type: "IE",
version: Number(t.match(/msie ([\d]+)/)?.[1]),
}
: !!t.match(/trident\/.+?rv:(([\d.]+))/)
? {
type: "IE",
version: 11,
}
: 0 <= t.indexOf("edge")
? {
type: "Edge",
version: Number(t?.match(/edge\/([\d]+)/)?.[1]),
}
: 0 <= t.indexOf("firefox")
? {
type: "Firefox",
version: Number(t.match(/firefox\/([\d]+)/)?.[1]),
}
: 0 <= t.indexOf("chrome")
? {
type: "Chrome",
version: Number(t.match(/chrome\/([\d]+)/)?.[1]),
}
: 0 <= t.indexOf("opera")
? {
type: "Opera",
version: Number(t.match(/opera.([\d]+)/)?.[1]),
}
: 0 <= t.indexOf("Safari")
? {
type: "Safari",
version: Number(t.match(/version\/([\d]+)/)?.[1]),
}
: {
type: t,
version: -1,
};
};
1、滚动到页面顶部
export const scrollToTop = () => {
const height = document.documentElement.scrollTop || document.body.scrollTop;
if (height > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, height - height / 8);
}
};
2、滚动到页面底部
export const scrollToBottom = () => {
window.scrollTo(0, document.documentElement.clientHeight);
};
3、滚动到指定元素区域
export const scrollSmooth = (element: string) => {
document.querySelector(element)?.scrollIntoView({
behavior: 'smooth',
});
};
4、获取可视窗口高度
export const getClientHeight = () => {
let clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight =
document.body.clientHeight < document.documentElement.clientHeight
? document.body.clientHeight
: document.documentElement.clientHeight;
} else {
clientHeight =
document.body.clientHeight > document.documentElement.clientHeight
? document.body.clientHeight
: document.documentElement.clientHeight;
}
return clientHeight;
};
5、获取可视窗口宽度
export const getPageViewWidth = () => {
return (document.compatMode == 'BackCompat' ? document.body : document.documentElement)
.clientWidth;
};
