flutter 尺寸单位,逻辑分辨率

一直以来被flutter默认单位所迷惑,虽然不需要搞懂也不影响写代码,但是还是想要搞清楚.

之所以被迷惑有以下原因

1.官方没有明确说明

2.很多讲手机分辨率的教程都标注 @1x @2x @3x 所以潜意识的一位 1080*1920 @3x的手机的逻辑分辨率是360.

3.flutter中测试出来的宽度为小数.

Iphone的数据来源

flutter 的像素尺寸-CSDN博客

设备	物理分辨率		flutter测试宽度	倍率
	宽	高
android  5寸	1080	1920	412	2.62
iPhone8+ 5.5寸	1080	1920	414	2.61
iPhoneXr 6.1寸	828	1792	414	2
iPhone8 4.7寸	750	1334	375	2
iPhone7+ 5.5寸	1080	1920	414	2.61
iPhoneX 5.8	1125	2436	375	3
iPhone 11	828	1792	414	2

我自己测试得到的数据

自己测试:

设备	物理分辨率宽	flutter测试宽	倍率	网页测试宽度
小米13 U	1440	411.4285	3.5	412
mi MIX 2s	1080	392.72	2.7	393
小米MAX3	1080	392.72	2.7	393

网页测试宽度

设置缩放倍率为1.0
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

获取屏幕宽度
window.screen.width

所以flutter的单位就是手机的逻辑分辨率=h5页面的1px,

h5页面为了兼容性取整了,这个值应该是设备提供的.