手机版微信屏幕尺寸是多少像素？

来源：蜘蛛抓取(WebSpider) 时间：2022-07-05 13:44 标签： 分辨率和像素的关系

最近很多小伙伴都在问一些关于微信上的UI界面设计的问题，比如设计尺寸、图标、如何兼容等等。还有一些微信单图文和多图文的图片设计尺寸问题。

今天，25学堂在此一一跟大家说一下。有兴趣的小伙伴可以阅读一下：

首先iPhone6在微信上的设计尺寸大小与实际展示大小

微信网页可视高度: 416px

微信网页可视高度: 504px

微信内网页可视高度: 603px

微信网页可视高度: 672px

当我们在设计微信H5页面的尺寸当中，有2种选择的尺寸：

第二种是：我们一般是按照“宽1080 *  高1698（）的尺寸进行页面设计，宽1080是考虑到做到主流大屏手机的尺寸然后向下兼容。高度方面还要考虑减去手机系统标题栏，以及微信app标题栏的高度。

当我们h5前端在做兼容性处理的时候，只需要理解上面的这些尺寸，即可快速写出兼容性代码：

第二个部分是关于微信图文消息推送当中的图片尺寸问题：

微信图文消息体验过程中有三类图片：

1. 公众号对话框中的图文消息"封面图片”（分一级、二级两种）

2. 图文消息页面的“正文图片”

3. 在对话框或朋友圈中的“缩略图”

微信有推荐尺寸：一级宽900*高500像素，二级200*200

如果宽900的要求不能达到，尽量保持宽高比，因为这会影响到3的效果

一级图文消息的封面可以显示在正文中，也即微信认为宽度为900的图片显示质量就不错

所以宽度不要超过900太多至于加载慢，也不要小于太多至于图模糊了

二级图文消息的封面（200*200）会直接作为分享的缩略图

一级图文消息的缩略图是从封面900*500的正中央截取500*500的区域后缩放得到，想要缩略图显示效果好，需要将重要的内容放在封面图片的中央部位

在OLED显示屏上，当一个像素是纯黑色的时候，该像素将会被关闭并且不消耗能量，这时如果显示屏显示的是大面积的黑色像素，将会大大降低显示屏消耗的电量。此外，晚上躺在床上看手机时，还是在黑色背景下阅读白色文字对眼睛的刺激要小一些。

不知从何时开始，我们的聊天工具逐渐变成了微信。但微信更新的暗黑模式，却很少有人使用。

用户在将微信更新至最新版本后，即可开启暗黑模式。开启后，微信首页、聊天页面、发现页面、公众号文章页面、视频号页面、搜一搜页面、微信支付页面等都将自动转为深色。

其实微信的暗黑模式和手机的暗黑模式一样，都是在夜晚降低屏幕亮度，转为黑底白字。这种暗黑模式到底好不好用呢？

某些情况下暗黑模式更省电

暗黑模式有什么直接作用呢？暗黑模式可以节省有机发光二极管（OLED）显示屏的电量。从电池电量的角度来说，在具有OLED显示屏的设备上，暗黑模式其实是优于明亮模式的。这是由OLED屏幕的工作方式导致的。

在OLED显示屏上，当一个像素是纯黑色（偏离一点点都不行）的时候，该像素将会被关闭并且不消耗能量，这时如果显示屏显示的是大面积的黑色像素，将会大大降低显示屏消耗的电量。

换句话说，使用OLED显示器，显示黑色屏幕的白色文本要比白色屏幕的黑色文本更省电。不过这里面有一点要注意，只有像素完全是黑色的，才会省电。如果像素只是非常深的灰色或虽然非常黑但不是纯黑像素的时候，就不会有省电的效果。出于美观的原因，许多深色模式会用深灰色，而不是OLED真正能省电所要求的纯黑色。

暗黑模式到底可以节省多少电量？在此前进行的一次测试中，在OLED屏幕上使用官方应用，一个开启暗黑模式，一个没有开启暗黑模式，结果显示暗黑模式有显著的节能效果：在50%的亮度下，暗黑模式与正常模式相比，可以节省大约14%的电量；当屏幕亮度为100%时，暗黑模式与正常模式相比，可以节省约60%的屏幕所消耗的电量。

暗黑模式还有一些其他优势

暗黑模式除了省电，还有没有其他作用？

我们平时晚上趴在被窝里打开手机App时，总会弹出来一句：是否开启暗黑（夜间）模式？

暗黑模式在弱光环境下非常有用。晚上躺在床上看手机时，肯定是用黑色背景阅读白色文本要好一些，因为白色背景的屏幕发射的光较多，可能会有些刺眼。

当然，在晚上降低屏幕亮度，同时又眯起眼睛来看手机的话，进入眼睛的光就会变少，对眼睛的损害也会相应的降低。

其实暗黑模式还有其他一些优势。它可以改善一些用户对明亮光线的敏感性。比如有“畏光症”的人，明亮的背景光可能会引发其偏头痛，那么此时暗黑模式就可以帮助这些人继续使用手机。还有一些人由于视力问题，他们在深色背景上阅读明亮的文本会更加容易，这也是在暗黑模式流行之前，一些手机上有“反转颜色”这一功能的原因。

根据美国验光协会的数据，散光是一种非常普遍的现象。而散光患者阅读“白板黑字”比阅读“黑板白字”更难。

尽管许多人在昏暗的条件下使用暗黑模式会感到更舒适，但具体情况还要因人而异。人类天生是昼行性动物，因此大部分人还是更习惯在亮光下看黑色，而不是像暗黑模式一样正相反。

不过暗黑模式是好是坏，还没有一个确定的定论，只要你用着舒服就好了。

来源：中国科学院物理研究所公众号

来源：中国科学院物理研究所公众号

最近在负责有赞的某个业务的微信小程序开发，这是我第一次着手微信小程序的开发，这个过程中发现微信小程序所定义的一套 WXSS (WeiXin Style Sheets) 中有一个有趣的长度单位 rpx，即 responsive pixel。

那么怎么理解 rpx，还有它与 px 之间什么关系？什么是物理像素？
为了更好理解 rpx，我打算聊聊下面的一些概念：

像素，英文单词：pixel，是英语单词 「picture」 的简写 「pix」，加上 「element」 的简写 「el」，合成的词汇，表示「图像元素」的意思。
一个像素只能表达一个色块，是显示的最小的一个单元。

而在我们写代码的时候，可以把像素分为两种：

Pixels per inch，每英寸像素，也被称为像素密度，意思是一英寸中有多少个物理像素。

PPI 怎么算出来的？

要计算显示器的每英寸像素值，首先要确定屏幕的尺寸和分辨率。

「物理像素」是有特定长度的，这取决于 ppi 值。

那么如何求出一个设备的物理像素的长度？
因为绝大多数设备的物理像素都是方形的，我们可以假设当前设备的像素是方形的。

可以看出 iPhone6 plus 的屏幕制作工艺更加精细。
因为像素越小，那么单位面积内像素点就越多，显示的效果人眼就越难看出毛刺。
用来显示一份图像的像素越多，效果就越接近现实。

和物理像素不同，「逻辑像素」没有特定的物理长度的，只是表示显示设备中最小的显示单元，优秀的显示设备完全可以把显示单元做的更加小，已达到更好的显示效果。

在早先的移动设备中，并没有 DPR 的概念。随着技术的发展，移动设备的屏幕像素密度越来越高。
从 iPhone4 开始，苹果公司推出了所谓的 Retina 视网膜屏幕。之所以叫做视网膜屏幕，是因为屏幕的 PPI 太高，人的视网膜无法分辨出屏幕上的像素点。
iPhone4 的分辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍，于是 dpr = 2。

在 Chrome 浏览器可以通过以下代码获取设备的 DPR：

而通过下面的代码可以获取设备的逻辑像素：

那么很多人看到这里，就会认为：物理像素 = 逻辑像素 * dpr
但实际情况并不是这样，
留意一下 iPhone6 plus 的物理像素和逻辑像素：

所以说是假 3 倍 dpr，其实我们开发和设计的时候也不用管这个，当作它就是 3 倍 dpr 就好了。

根据官方给出的 rpx 换算 px 的实例：

rpx 转换成 px 是需要乘以一个系数的：

其中系数 n，是跟着设备改变的：

所以 rpx 只是定义一个绝对值 750 宽度，然后简单的根据不同设备的逻辑像素来进行 rpx 到 px 的换算。

精明的观众可能发现了， rpx 压根就不需要关心 DPR 和 PPI 的概念。
呃，其实我就是在理解 rpx 的过程中，拦不住思维的发散，了解了一大堆概念，然后顺道给你们分享一下罢了。

我要回帖

更多关于 分辨率和像素的关系 的文章

 

随机推荐