获取设备及屏幕信息
原创...小于 1 分钟
不同的手机系统类型不同,屏幕大小也不同,有的手机屏幕的上方(刘海屏)和底部都有一定的安全距离,因此,拿到这部分信息是做好多终端设备适配的核心
小程序的右上角还有一个胶囊按钮,也要对其进行适配
我们可以在 app.ts 文件中的 onLaunch() 里进行该相关信息的获取和存储
获取设备信息
wx.getSystemInfoSync()
获取胶囊信息
wx.getMenuButtonBoundingClientRect()
App<IAppOption>({
globalData: {},
onLaunch() {
const systenInfo = wx.getSystemInfoSync();
const capsuleInfo = wx.getMenuButtonBoundingClientRect();
console.log("设备信息", systenInfo);
console.log("胶囊信息", capsuleInfo);
const screenHeight =
(systenInfo.screenHeight / systenInfo.screenWidth) * 750;
const safeHeight =
((systenInfo.safeArea.height -
(capsuleInfo.height +
(capsuleInfo.top - systenInfo.statusBarHeight) * 2)) /
systenInfo.screenWidth) *
750;
const screenWidth = (systenInfo.screenWidth / systenInfo.screenWidth) * 750;
const statusBarHeader =
(systenInfo.statusBarHeight / systenInfo.screenWidth) * 750;
const capsuleHeight =
((capsuleInfo.height +
(capsuleInfo.top - systenInfo.statusBarHeight) * 2) /
systenInfo.screenWidth) *
750;
const safeFooter =
screenHeight - safeHeight - statusBarHeader - capsuleHeight;
console.log("屏幕总高度", screenHeight);
console.log("可使用的屏幕高度", safeHeight);
console.log("屏幕总宽度", screenWidth);
console.log("状态栏高度", statusBarHeader);
console.log("胶囊区域高度", capsuleHeight);
console.log("底部安全区域高度", safeFooter);
},
});
Powered by Waline v2.15.7