整理常用 微信浏览器和小程序设备信息

微信浏览器环境

// 是否为新iphonex
export const isNewIphone = typeof window !== 'undefined' && window ? /iphone/gi.test(window.navigator.userAgent) && window.screen.height >= 812 : false;

// px转rem 75
export const pxTurnRem = (num: number) => `${num / 75}rem`;

//去除掉底部fixedBottom 中间body高度
export const centerHeight = `calc(100vh - ${pxTurnRem(isNewIphone ? 182 : 148)})`;


// 是否为iphone
export const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);

export const isIOS = () => {
  const isIphone = navigator.userAgent.includes('iPhone');
  const isIpad = navigator.userAgent.includes('iPad');
  return isIphone || isIpad;
};

小程序（Taro /wx）

import Taro from '@tarojs/taro';

const systemInfo = Taro.getSystemInfoSync();
// 小程序右上角的胶囊布局数据
const capsule = Taro.getMenuButtonBoundingClientRect();

// 屏幕高度
const screenHeight = systemInfo.screenHeight;

// 屏幕宽度
const screenWidth = systemInfo.screenWidth;
// 胶囊顶部减去状态栏高度可以得到导航栏菜单的 paddintTop，上下内边距 + 胶囊高度 = 导航栏菜单高度
const navMenuHeight = (capsule.top - systemInfo.statusBarHeight) * 2 + capsule.height;
// 整个导航栏高度
const navHeight = navMenuHeight + systemInfo.statusBarHeight;

// 部分新的 iPhone 需要将底部抬高
const newPhoneList = [/iPhone X/, /iPhone 1/, /unknown.*iPhone/];
const iPhone5List = [/iPhone 5/, /iPhone 5s/, /iPhone SE/];
const isNewIphone = newPhoneList.some(item => item.test(systemInfo.model));

const isIphone5 = iPhone5List.some(item => item.test(systemInfo.model));
// 底部 tabbar 菜单部分高度
const tabbarMenuHeight = 50;
// 底部 tabbar 高度
const tabbarHeight = isNewIphone ? tabbarMenuHeight + 34 : tabbarMenuHeight;
// 除去首尾高度后的剩余高度
const bodyHeight = screenHeight - navHeight - tabbarHeight;
// 除去导航高度后的剩余高度
const bodyNoTabHeight = screenHeight - navHeight

export {
    screenHeight,
    screenWidth,
    navMenuHeight,
    navHeight,
    isNewIphone,
    tabbarMenuHeight,
    tabbarHeight,
    bodyHeight,
    bodyNoTabHeight, isIphone5
};