微信小程序getSystemInfo的屏幕宽度不一致问题

最新推荐文章于 2024-03-14 17:34:59 发布

原创

最新推荐文章于 2024-03-14 17:34:59 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

本文探讨微信小程序中getSystemInfo获取的屏幕宽度与实际分辨率不符的问题，解析逻辑像素、物理像素和像素密度的关系，并提供计算物理像素的实用方法。

微信小程序getSystemInfo的屏幕宽度不一致问题

在开发微信小程序时，有时候需要获取设备的一些信息，微信基础库提供了wx.getSystemInfo()方法提供给开发者使用。但是在前端进行机型适配时，获取的屏幕宽度(screenWidth)和屏幕高度(screenHeight)与手机实际的分辨率不一致。
比如我的手机分辨率为2340*1080，也就是所谓的2K分辨率。然后调用getSystemInfo()方法获取的屏幕宽度为360，高度为780，单位是px。这是怎么回事呢？
这里就需要了解以下几个概念了。

逻辑分辨率(Point,pt): 页面上抽象的像素点的多少，与设备屏幕尺寸有关
物理分辨率(Pixel,px):影像显示的基本单位，与屏幕尺寸无关
像素密度(ppi):表示每英寸所拥有的像素数量。1 inch=2.54 cm
像素比(Device Pixel Ratio,dpr): dpr = 物理像素 / 逻辑像素

上面的逻辑分辨率又叫逻辑像素，物理分辨率又叫物理像素。而getSystemInfo()获取的屏幕宽度为逻辑像素大小，而手机设置里的系统信息中显示的是物理像素。拿我的手机举个例子：

手机屏幕尺寸：6.26英寸
物理分辨率：2340*1080
逻辑分辨率：780*360
计算得出：
dpr= 2340/780=3 或者 1080/360=3

$\frac{\sqrt{width^2+height^2}}{屏幕尺寸}$

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

红帽小生

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序 - 获取用户手机屏幕高度与宽度（两种方案）

🏆 前端领域优质创作者

10-08

1万+

前言有时候我们需要获取用户手机屏幕高度或宽度来完成一些界面表现，具体请看代码。第一种方案（推荐） "vw"="viewwidth""vh"="viewheight" 使用CSS3引入的vw/vh基于宽度/高度相对于窗口大小。 /*元素根据手机屏幕宽高占位100%*/ .view{ height:100vh; width:100vw; } 第二种方案官方文档：https://developers.weixin.qq.com/miniprogra

微信小程序：用 rpx 和 wx.getSystemInfoSync() 来适配屏幕高度

weixin_43837555的博客

02-04

1万+

目前网络上关于 px / rpx / rem 相互转换的博文有很多，作为初学者在实际操作过程中会发现可以用 750rpx 来表示屏幕宽度，但屏幕高度咋表示捏？~ 于是本文主要用来说明如何用 rpx 和 wx.getSystemInfoSync() 来适配屏幕高度具体步骤首先我们需要用 wx.getSystemInfoSync() 来获取设备信息 /*把这两个变量作为全局变量，看起来会好看...

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

不正经的kimol君 2020.10.17
666，反手就是一个赞，欢迎回赞哦~

微信小程序踩坑总结

RequesToGod的博客

08-04

2079

app.js app.js文件类似于Vue中的VueX，React中的Redux。在app.js中的APP中声明数据类型，即可在任意页面中全局调用。声明：调用：xxx.js // pages/feedback/feedback.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log(getApp

微信小程序canvas画布不清晰解决方法

qq_63608386的博客

03-14

1350

添加以下代码,通过设置分辨率来解决。绘制的图片，文字等十分模糊。按照以上方法即可实现。

小程序 wx.getSystemInfoSync 获取 windowHeight 不准确的问题

热门推荐

梦逸灵箭——的博客

08-29

1万+

如果本文对你有用，请爱心点个赞，提高排名，帮助更多的人。谢谢大家！❤ 如果解决不了，可以在文末进群交流。 wx.getSystemInfo(OBJECT) 获取系统信息。 OBJECT参数说明：参数类型必填说明 success Function 是接口调用成功的回调 fail Function 否接口调用失...

[Uniapp]实际设备尺寸和getSystemInfo()中的windowHeight等不符

Cucci | IT猿的自白

04-13

1949

也就是说，这个实际上应该是px和point直接的一个转换，这里可以去看下详细的百度解析，手机使用的分辨率是逻辑像素，而手机屏幕有个实际像素，这个像素之间会有个转换的倍率，就是getSystemInfo().devicePixelRatio。getSystemInfo 获取到的是与WebView一致的逻辑像素，你设置的模拟器是定义的物理像素，他们之间的换算比例为devicePixelRatio。在Uniapp中，通过获取信息得到的实际尺寸与逻辑位像素不符，导致无法正常设置尺寸。

微信小程序--获取屏幕宽度及弹窗滚动与页面滚动冲突

03-29

1.获取屏幕宽度，并赋值给view wx.getSystemInfo({ success: function (res) { // console.log(res.windowWidth) 屏幕宽度 that.setData({ windowWidth: res.windowWidth }) } }) 2.最近遇到自定义弹窗滚动...

微信小程序中使元素占满整个屏幕高度实现方法

08-31

5. **适配不同设备**：由于微信小程序需要兼容各种尺寸的屏幕，为了保证全屏效果在不同设备上一致，可以使用`rpx`（responsive pixel）单位，它会根据屏幕宽度自动调整大小。 6. **考虑状态栏和导航栏高度**：在...

wx.getSystemInfo获取windowHeight部分手机偶尔不准确问题

xll712的博客

10-11

1035

wx.getSystemInfo获取windowHeight部分手机偶尔不准确？最近在接手公司小程序的开发，遇到一个很奇怪的问题，就是我们小程序中的某个页面底部的一个按钮在某些情况不显示的问题；同一个手机，同一个页面获取的windowHeight偶尔会有一次不一致的情况；如下图所示：正常显示截图异常显示截图在部分华为手机上就出现底部按钮不显示，该按钮的位置计算是根据小程序wx.getSystemInfo返回的windowHeight高度进行计算的，为了调查这个问题，我把此高度显示在屏幕中显示

小程序获取屏幕宽高wx.getSystemInfoSync().windowWidth

weixin_43923808的博客

09-02

6063

即：1px = (750 / wx.getSystemInfoSync().windowWidth) rpx。屏幕实际宽度为：wx.getSystemInfoSync().windowWidth px。1、官方上规定屏幕宽度为20rem，规定屏幕宽为750rpx，则1rem=750/20rpx。即：不论哪个型号的手机，屏幕宽度都是750rpx。2、微信小程序rpx，px，rem单位换算规则。对应的屏幕宽度为：750rpx。

getimagesize()函数获取图片宽高取反

Aring的博客

04-21

1046

背景：手机摄像头朝下拍摄，上传后，getimagesize（）获取图片信息会把宽高去反，面对这种情况有以下方法。一、情况 exif_read_data（） exif_read_data（）函数是能获取图片详细摄像信息，包括GPS信息，所以以后图片上传前最好还是进行二次处理。 Array ( [0] => 2304 [1] => 1728 [2] => 2 [3] => width="2304" height="1728" [bits]

微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案

p15097962069的博客

07-22

767

微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案

uni.getSystemInfoSync().windowHeight两次调用不一致

qq_36635569的博客

06-19

1674

第一次打开页面时拿到的值与第二次打开页面拿到的值不一致，我算了一下，两次值得差异就是导航栏得高度。我开始是在onLoad方法里面调用getSystemInfoSync，拿到的。getSystemInfoSync()返回的对象中有两个高度值，一个是。：小程序视图高度（除去原生的顶部和底部导航栏的高度）回调函数里面调用，就能正常拿到。

小程序windowHeight在不同页面高度不一致问题及解决方案

qq_41619741的博客

10-18

8547

小程序可以通过wx.getSystemInfo获取系统信息 1. windowHeight 概念可使用窗口高度，即：屏幕高度（screenHeight） - 导航（tabbar）高度 - 导航栏高度 - 状态栏高度。在不含导航（tabbar）的页面， windowHeight =屏幕高度（screenHeight） - 导航栏高度 - 状态栏高度了解规则 iPho...

微信小程序根据wx.getSystemInfo获取屏幕尺寸，并动态改变元素宽高尺寸，示例

one312的专栏

04-09

2088

通过js获取屏幕尺寸，并改变元素尺寸 index.wxml <view class="body-view" style="width:{{wWidth}}rpx; height:{{wHeight}}rpx;"> <view class="top-view" style="width:{{topWidth}}rpx; height:{{topHeight}}rpx;">...

微信小程序获取手机分辨率高度

Effotzjw_小白慢慢踏全栈

12-30

3412

getPhoneInfo:function(){ this.setData({ phoneHeight: 750 / wx.getSystemInfoSync().windowWidth * wx.getSystemInfoSync().windowHeight }) }

uniapp微信小程序获取屏幕宽高

m0_55258023的博客

09-13

1万+

uniapp微信小程序获取屏幕宽高

微信小程序中获取页面的实际宽高和rpx的关系getSystemInfoSync

sunyv1的博客

08-03

1448

小程序提供了一个方法叫getSystemInfoSync，通过它可以获取当前屏幕信息 const info = wx.getSystemInfoSync(); const 与rpx的比值 = 750 / systemInfo.windowWidth; const 屏幕宽度 = info.screenWidth; const 屏幕高度 = info.screenHeight; const 状态栏高度 = info.statusBarHeight; const 可用窗口宽度 = info.windowWidth

微信开发小程序

qq_36981190的博客

11-24

973

1、注册页面对于小程序中的每个页面，都需要在页面对应的js文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。使用Page构造器注册页面简单的页面可以使用Page()进行构造。 Page({ data:{ text:"This is page data." }, onload:function(options){//页面创建时执行}, onShow:function(){//页面出现在前台时执行}, onReady:function(){//页面首次渲染完毕时执行}, o

微信小程序获取手机屏幕宽度

最新发布

05-05

<think>好的，我需要回答用户关于如何在微信小程序中获取手机屏幕宽度的问题。首先，用户提到了API或示例代码，所以我得回忆一下微信小程序的相关文档。记得微信提供了系统信息API，比如wx.getSystemInfo和wx.getSystemInfoSync，这两个方法都可以获取设备信息，包括屏幕宽度。接下来，用户可能需要异步和同步两种方法的示例。异步方法通常用回调函数处理结果，而同步方法直接返回数据，适用于需要立即获取信息的场景。我需要分别给出这两种方法的代码示例，并解释它们的使用场景。另外，用户可能对如何在不同地方使用这些方法感兴趣，比如在Page的onLoad函数中调用，或者在WXML中使用数据绑定。所以应该包括如何在js文件中获取数据，并更新到页面上显示的例子。还要注意引用相关的参考资料，比如引用[3]和[4]提到了wx.getSystemInfo的参数和返回的数据结构，需要确认这些参数是否正确，比如screenWidth和windowWidth的区别。根据引用[4]，screenWidth是屏幕宽度，而windowWidth是可使用窗口宽度，可能需要说明两者的不同，但用户的问题是关于手机屏幕宽度，所以应该使用screenWidth。另外，用户可能想知道如何将获取到的宽度应用到样式或布局中，比如使用rpx或vw/vh单位，但根据引用[3]，可以使用CSS3的vm和vh，但可能更常见的是使用rpx来适配不同屏幕。不过用户的问题主要是获取屏幕宽度，这部分可能作为补充说明。最后，生成相关问题的时候，要考虑用户可能的后续疑问，比如不同单位的转换、动态调整布局、获取其他设备信息等，这样能帮助用户进一步探索相关知识。</think>在微信小程序中获取手机屏幕宽度，可通过以下两种官方API实现： ### 一、异步获取方式使用`wx.getSystemInfo`方法： ```javascript wx.getSystemInfo({ success: function(res) { const screenWidth = res.screenWidth console.log('屏幕宽度：', screenWidth) // 建议将数据更新到页面 this.setData({ screenWidth: screenWidth }) }.bind(this) }) ``` ### 二、同步获取方式使用`wx.getSystemInfoSync`方法： ```javascript const systemInfo = wx.getSystemInfoSync() const screenWidth = systemInfo.screenWidth console.log('屏幕宽度：', screenWidth) ``` ### 三、完整示例代码 ```javascript // index.js Page({ data: { screenWidth: 0 }, onLoad() { // 同步获取示例 const systemInfo = wx.getSystemInfoSync() this.setData({ screenWidth: systemInfo.screenWidth }) // 异步获取示例（可选） wx.getSystemInfo({ success: res => { this.setData({ screenWidth: res.screenWidth }) } }) } }) ``` ```html  <view>当前屏幕宽度：{{screenWidth}}px</view> ``` ### 四、关键参数说明 | 属性 | 说明 | 单位 | |------|------|------| | screenWidth | 设备物理屏幕宽度 | px | | windowWidth | 可用窗口宽度（不包含导航栏） | px | 建议在页面初始化时获取该值，可配合CSS的`rpx`单位实现响应式布局[^3][^4]。