首页 > 编程语言 >微信小程序高度适配

微信小程序高度适配

时间:2024-01-23 13:55:50浏览次数:27  
标签:750 程序 适配 高度 globalData res 微信 设备

参考文章【微信小程序:用 rpx 和 wx.getSystemInfoSync() 来适配屏幕高度-CSDN博客

1.小程序的任何机型的宽度固定为750rpx;为了适配不同设备的高度可以通过下面的公式转化

750/设备宽度=屏幕设置高度/设备高度

所以自适应屏幕应该设置的高度=750*设备高度/设备宽度

2.获取设备信息

App({
  globalData:{
    screenTotalH:0//设备屏幕高度
  },
 onLaunch: function () {
    const that = this;
    wx.getSystemInfoAsync({
      success (res) {
        that.globalData.screenTotalH = 750*res.windowHeight/res.windowWidth;
        console.log(that.globalData);
      }
    });

小程序选择机型:

调试器结果显示:

3.页面中使用

页面js获取

 页面wxml使用

 

标签:750,程序,适配,高度,globalData,res,微信,设备
From: https://www.cnblogs.com/yheyi/p/17982295

相关文章

  • IDEA报错:java: 程序包javax.servlet不存在
     DEA报错:java:程序包javax.servlet不存在 在IDEA中如果报缺少servlet-api.jar和jsp-api.jar这两个包的话,这是因为没有加入tomcat的依赖包。如下图,在IDEA下,importjavax.servlet.*相关的包都是报红的话,就肯定就是缺少jar包了。导入tomcat依赖包  查看是否导入成功在......
  • 黎活明给程序员的忠告
    黎活明,传智播客教育总裁,JavaEE高级架构师、咨询顾问、高级讲师,国内第一本ejb3.0书籍的作者,有着丰富的b/s系统开发与网站运营经验。现任传智播客教育科技有限公司JavaEE高级架构师与咨询顾问。其中一些我认为经典的地方,做了标红处理。展望未来,总结过去10年的程序员生涯,给程序员小......
  • 微信小程序-wx:key的作用为什么不能使用index
    wxml中的代码为<viewclass="swiperContent"><swiper indicator-dots="true"autoplay="true"><swiper-itemwx:for="{{bannerList}}"wx:key="bannerId"><imagesrc="{{ite......
  • Vue项目迁移小程序,实操干货分享
     今天就给大家分享“Vue项目转小程序”的实操干货。首先明确需求:开发者是想将已有的Vue项目转为小程序,在集成了 FinClip SDK的App中运行小程序,那这里我们就需要关注以下两个注意事项:Web项目是适合在手机等移动设备中运行的,屏幕已经兼容;H5项目的代码是前后端分离......
  • 计算机编程中的黑魔法编程是什么?如何求解一个浮点数的平方根倒数?计算机中的浮点数是如
    原视频:没有显卡的年代,这群程序员用4行代码优化游戏最原始的求解目标:(求一个浮点数的开方的导数)浮点数在计算机中的表示形式:对数的运算法则:A为a在计算机中的表示形式(二进制表示形式):求浮点数的平方根倒数的应用场景:这个情况,直白的说就......
  • Winform中设置程序开机自启动(修改注册表和配置自启动快捷方式)
    场景winform程序需要在启动时自启动,可通过将exe快捷方式添加到自启动目录下,或者通过修改注册表添加启动项的方式。注:博客:https://blog.csdn.net/badao_liumang_qizhi实现使用添加快捷方式到启动目录的方式Windows下怎样使用bat设置Redis和Nginx开机自启动:https://blog.csd......
  • SQLServer 的驱动程序
    SQLServer的驱动程序介绍ODBC有三代不同的MicrosoftODBCDriverforSQLServer。SQLServerODBC仍作为Windows数据访问组件的一部分提供。不再对其进行维护,且不建议在新开发中使用此驱动程序。SQLServerNativeClient(ODBC)从SQLServer2005开始,SQLServerN......
  • 利用Taro框架搭建基于React项目并编译成微信小程序
    Taro是一个开放式跨端跨框架解决方案,支持使用React/Vue/Nerv等框架来开发微信/京东/百度/支付宝/字节跳动/QQ/飞书小程序/H5/RN等应用。现如今市面上端的形态多种多样,Web、ReactNative、微信小程序等各种端大行其道。当业务要求同时在不同的端都要求有所表现的时候,针对不......
  • 旧物回收小程序开发:开启环保新篇章
    随着社会的发展,环保问题日益受到人们的关注。旧物回收作为环保行动的重要一环,具有重大的意义。而随着移动互联网的普及,小程序成为了一种新的应用形态,为旧物回收提供了新的解决方案。本文将探讨旧物回收小程序开发的意义、功能设计以及未来展望。一、旧物回收小程序开发的意义推动环......
  • 微信小程序如何获取当前日期时间
    Hello大家好!我是咕噜铁蛋,获取当前日期时间是小程序中经常会用到的一个功能。因此,在本文中,我通过科技手段给大家收集整理了下,今天我将向大家介绍如何在微信小程序中获取当前日期时间的方法,并分享一些实用技巧和注意事项。一、获取当前日期时间的方法在微信小程序中,获取当前日期时间......