小程序怎么判断是否是全面屏手机？

最新推荐文章于 2023-09-13 16:39:27 发布
最新推荐文章于 2023-09-13 16:39:27 发布
阅读量795 收藏
点赞数 1
分类专栏： 小程序 js taro 文章标签： 小程序
不许偷代码哦，一键三连以后我的代码就是你的代码！！！
本文链接：https://blog.csdn.net/youyzq/article/details/126123542
版权
js 同时被 3 个专栏收录
59 篇文章 2 订阅
订阅专栏
小程序
22 篇文章 0 订阅
订阅专栏
taro
17 篇文章 1 订阅
订阅专栏
这篇博客介绍了如何通过Taro的getSystemInfoSync()接口和wx.getSystemInfo()方法来判断iOS小程序是否运行在全面屏设备上。代码中设置了一个全局状态isAllScreen，当屏幕高度不等于安全区域底部且平台为iOS时，标记为全面屏手机。这个方法对于确保小程序在不同设备上的界面适配具有重要意义。
摘要由CSDN通过智能技术生成

直接上代码

1.创建一个全局的状态
在这里插入图片描述

module.exports = {
  isAllScreen:false,        //是否是全面屏手机
};

2.在app入口文件

// 使用wx.getSystemInfoSync()中的screenHeight和safeArea的bottom判断
      if (Taro.getEnv() == ENV_TYPE.WEAPP && res.screenHeight && res.screenHeight !== res.safeArea.bottom && res.platform.toLowerCase() === 'ios') {
        Device.isAllScreen = true
      }

safeArea对象
在这里插入图片描述
screenHeight屏幕高度，单位px在这里插入图片描述
Taro.getEnv()获取当前环境(判断是否是小程序打开)

Youyzq
关注
专栏目录
封装微信小程序顶部导航栏，自适应各种手机屏幕
weixin_50147372的博客
12-30 693
根据当前需求封装的，ios标题居中，安卓上靠左，可能有点垃圾，希望给位指正 首先要在封装的page.json文件下写入: "navigationStyle":"custom", 在app.js中定义全局获取顶部高度 创建导航栏组件navigation（名字自定义） // 获取屏幕参数 try { const res = wx.getSystemInfoSync() if (res.platform == 'ios') { _this.globalData.p
小程序video至于底部_小程序对IPhone全面屏手机底部黑线的安全区域处理
weixin_40009472的博客
11-14 338
今天在编写小程序页面时发现，在iphoneX真机预览时，底部button会被手机底部黑线盖住一部分，对于我这种强迫症来说，简直不能忍。首先说下手机的安全区域安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。我用的手机是iphoneX，显示效果如上，为了美观和易用性，我们...
微信小程序 判断是否是全面屏手机和机型
奋斗吧灬青年的博客
10-13 933
let _this = this; // 获取手机系统信息 wx.getSystemInfo({ success: res => { // 根据 屏幕高度 进行判断 if (res.screenHeight - res.windowHeight - res.statusBarHeight - 32 > 72) { ...
小程序判断屏幕是长屏还是短屏手机，iPhone X 类型还是 iPhone 6类型
a_靖的博客
03-19 2452
直接看代码 onLaunch: function(e) { /**判断屏幕大小 */ var judgeBigScreen = () => { let result = false; const res = wx.getSystemInfoSync(); const rate = res.windowHeight / res.windowWidth; let limit = res.windowHeight == res.screenHeight
Javascript判断是否iphone全面屏手机
xuanwuziyou的专栏
02-12 3739
Javascript判断是否iphone全面屏手机： function testUA (str) { return navigator.userAgent.indexOf(str) > -1 } // 判断是iphoneX及以后的iphone手机（即iphone带全面屏的手机） var isNewIphone = window && testUA('iPhone') &a...
微信小程序 全面屏适配
热门推荐
DavidFFFFFF的博客
09-10 1万+
最近在做小程序，说实话小程序的坑我才刚踩。今天做了一个关于小程序自定义navigator的功能，不废话，先上图 通过配置app.json的window属性的navigationStyle（导航栏样式，仅支持以下值： default 默认样式custom 自定义导航栏，只保留右上角胶囊按钮），改为custom模式，来自定义navigator。 注释： 注：navigation...
H5判断手机是普通屏幕还是全屏的方法
ersorn
01-10 1263
function judgeBigScreen() { //，这里根据返回值 true 或false ,返回true的话 则为全面屏 var result = false; var rate = window.screen.height / window.screen.width; var limit = window.screen.height == win...
微信苹果壁纸全面屏小程序
12-23
这个小程序提供了丰富多样的高清、适配全面屏的苹果手机壁纸，让用户能够方便快捷地在微信环境中更换手机壁纸，提升个性化体验。下面将详细探讨与这个小程序相关的技术知识点。 1. **微信小程序开发**： 微信小...
安卓手机全面屏模拟器（可自定义安卓手机分辨率）
11-08
关于"全面屏分辨率模拟.exe"这个文件，它很可能是模拟器的执行程序，用户只需双击运行即可启动模拟器。"tool"可能包含了一些辅助工具或配置文件，与模拟器的运行和设置有关。 总的来说，"安卓手机全面屏模拟器"是一...
微信小程序 全面屏的适配
攻城喵小猫的博客
08-01 1669
通过配置app.json的window属性的navigationStyle（导航栏样式，仅支持以下值： default 默认样式custom 自定义导航栏，只保留右上角胶囊按钮），改为custom模式，来自定义navigator。 注：navigationStyle 只在 app.json 中生效。开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低...
微信小程序canvas生成图片保存到本地 部分全面屏手机显示出生成的图片
xiaoqiangbigbrother的博客
11-07 6502
问题总结： 1，canvas生成的图片隐藏不了（下文解决） 2，网络图片开发工具显示但是真机显示不了 （下文解决） 3，canvas生成的图片清晰度问题 jpg （图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理） 4, 图片等比例根据规定最大尺寸进行缩放 保证原图能在规定区域显示完全（我们的需求 也有要截取图片部...
小程序适配全面屏机型
不想起床
05-21 1703
应用场景 手机适配 思路分析 1：首选需要判断是否是全面屏手机 2：如果是全面屏手机，则改变响应的样式 代码实现 1:在全局放一个变量.isFullSucreen，含义为是否是全面屏 2：调用wx.getSystemInfo。 利用公式计算出是否是全面屏，如果是全面屏，就将其赋值为true 3：在需要适配的页面，获取isFullSucreen(此时，在需要在适配的页面，也初始化isFullSucreen为空或者false。而且由全局获取来的isFullSucreen，此时肯定是true)。 4:既
uniapp或微信小程序底栏固定定位在小黑条下全面屏适配解决
m0_65466908的博客
06-10 1175
使用uni或者微信提供的api。微信使用safeArea参数。uni使用safeAreaInsets参数。封装一个工具，哪个页面用哪里就调用，data里声明变量padding:'padding-bottom:0'下面是我的底栏html代码,绑定一个动态的style属性。
【uniapp】全面屏、刘海屏适配（iphoneX适配）及安全区设置
Songywaa的博客
11-18 2568
问题描述 iPhoneX和iPhoneX Max 的底部小黑条挡住底部tab，全面屏没有给底部留距离 解决办法 /*解决iphoneX等大屏手机底部小黑条挡住tab的解决方法： 安全区域距离底部边界距离env() 跟 constant() 需要同时存在，而且顺序不能换。*/ /* #ifdef H5 */ body { padding-bottom: constant(safe-area-inset-bottom);/* 兼容 iOS < 11.2 */ padding-bottom: en
微信小程序判断页面内容是否满一屏
Zq
09-20 775
今天做一个上拉加载下一页数据，发现微信官方的api【onReachBottom】只能触发一次。在我请求第一页数据的时候就被调用了，那个时候我判断正在加载就丢弃了事件，随后数据加载回来之后发现不满一屏幕，而onReachBottom是不被再次触发的，这个时候可以通过下方代码判断。
微信小程序固定底栏适配全面屏
wenfu814的博客
04-09 404
如果你的小程序页面按钮有用fixed定位到底部的话，那你一定会遇到兼容全面屏的坑（与底部横条重叠）。查了下文档，发现能用的就只有一个api 而已。 1.下面准备封装全局app.js方法 /** * 判断设备是否为全面屏 */ checkFullSucreen: function () { const self = this wx.getSystemInfo({ success: function (res) { .
小程序对IPhone全面屏手机底部黑线的安全区域处理
最新发布
m0_62972853的博客
09-13 238
首先，我们现在app.js的onLaunch生命周期中获取用户机型globalData: { //定义全局变量Modelmes为null,model为市面安全区域苹果机型。
uniapp 适配全面屏
qq_28641023的博客
06-27 2763
1、manifest.json 文件修改。2、部分页面设置全屏（登录页面）app-plus 下 添加。
2021-07-27
qq_44880532的博客
07-27 279
uniapp@uniapp uniapp 手机刘海屏适配问题 /** 判断手机是否为iphoneX系列 */ uniappIsIPhoneX() { let isIphoneX = false; let systemInfo = uni.getSystemInfoSync(); // #ifdef MP if (systemInfo.model.search(‘iPhone X’) != -1 || systemInfo.model.search(‘iPhone 11’) != -1 || systemI
小程序UI模板：校园及行业职位招聘平台
由于该模板是针对手机端设计的小程序，因此它特别适合于经常使用手机进行职位搜索的求职者以及希望通过小程序进行人才招聘的企业和人力资源公司。 六、后期拓展与维护 1. 对于开发者而言，根据具体需求，可对模板...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值