微信小程序 uniapp - iPhoneX 刘海屏适配

一、js直接调用wx.getSystemInfoSync

Page({data: {isIPhoneX:false,},onLoad: function () {this.setData({"isIphoneX": this.isIphoneX()})},isIphoneX() {let res = wx.getSystemInfoSync();if (res.screenHeight == 812 || res.screenHeight == 896) {return true;} else {return false;}}
})

二、调用wx.getSystemInfoSync

wx.getSystemInfo({success: function (res) {var safeBottom = res.screenHeight - res.safeArea.bottomthat.kBottomSafeHeight = safeBottom//根据安全高度判断if (safeBottom === 34) {that.globalData.isIPhoneX = truethat.isIPhoneX = true}// // 根据 model 进行判断// if (res.model.search('iPhone X') != -1) {//   that.globalData.isIPhoneX = true//   that.isIPhoneX = true// }// // 或者根据 screenHeight 进行判断// if (res.screenHeight == 812 || res.screenHeight == 896) {//   that.isIPhoneX = true// }}})

微信小程序 uniapp - iPhoneX 刘海屏适配相关推荐

html5苹果x底部满屏,iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配...
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 前言在苹果 iPho ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
【无标题】uniapp中页面跳转白屏微信小程序跳转白屏
微信小程序tab切换白屏这几个图标切换会出现短暂的白屏解决方法如下组件引入 1.先在common 下建立一个文件夹mixin 下 lodaingPlus.vue 组件 <template&g ...
微信小程序uni-app
文章目录一.微信小程序uni-app 二.下载微信开发者工具三.小程序开发一.微信小程序uni-app 小程序是一种不需要下载.安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一 ...
微信小程序背景图片全屏显示
微信小程序背景图片全屏显示很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
微信小程序canvas大小、定位适配
微信小程序canvas大小.定位适配在微信小程序canvas开发中,遇到一种情况:在iPhone X调好的定位大小,把机型调整为iPhone 5,由于iPhone5屏幕较小,canvas画出的内容就 ...
微信小程序uni-app前端应用框架和HBuilderX工具使用及Git管理项目
微信小程序uni-app前端应用框架和HBuilderX工具使用及Git管理项目官方地址:https://uniapp.dcloud.io/ 1.起步 1.1.简介 uni-app 是一个使用 Vu ...
微信小程序/uni-app 蓝牙打印开发教程和常见问题总结【文末附源码】
微信小程序/uni-app 蓝牙打印开发教程和常见问题总结[文末附源码] 文章目录微信小程序/uni-app 蓝牙打印开发教程和常见问题总结[文末附源码] 1️⃣ 写在前面 2️⃣ 蓝牙连接流程 3 ...
开发微信小程序(uniapp)
@2021SC@SDUSC WebStorm开发微信小程序(uniapp) 创建项目采用cli方式创建的项目 vue create -p dcloudio/uni-preset-vue my-pro ...

微信小程序 uniapp - iPhoneX 刘海屏适配

一、js直接调用wx.getSystemInfoSync

二、调用wx.getSystemInfoSync

微信小程序 uniapp - iPhoneX 刘海屏适配相关推荐

最新文章

热门文章