Flutter中如何获取横竖屏一致的正确设备宽高比？

问题根源 #

你之前的代码依赖isPortrait判断当前方向来交换宽高，但isPortrait是基于当前窗口的显示方向，而部分设备的原生物理方向可能不是竖屏（比如部分平板默认横屏），这会导致方向判断和物理尺寸的宽高对应关系出错，最终计算出的宽高比不一致。

正确解决方案 #

直接取物理尺寸的宽和高中的最大值除以最小值，这样无论屏幕如何旋转，得到的都是设备原生的宽高比（比如16:9、4:3等，统一为大值/小值的形式），保证横竖屏结果一致。

方案一：基于View的physicalSize #

final physicalSize = View.of(context).physicalSize;
// 取较大值除以较小值，得到一致的宽高比
final deviceAspectRatio = physicalSize.width > physicalSize.height 
    ? physicalSize.width / physicalSize.height 
    : physicalSize.height / physicalSize.width;

方案二：基于MediaQuery计算物理分辨率 #

如果你需要先获取设备的物理分辨率（宽x高），再计算宽高比，可以用MediaQuery结合设备像素比：

final mediaQuery = MediaQuery.of(context);
// 逻辑尺寸转物理尺寸
final physicalWidth = mediaQuery.size.width * mediaQuery.devicePixelRatio;
final physicalHeight = mediaQuery.size.height * mediaQuery.devicePixelRatio;
// 同样取大值/小值保证一致
final deviceAspectRatio = physicalWidth > physicalHeight 
    ? physicalWidth / physicalHeight 
    : physicalHeight / physicalWidth;

额外说明 #

如果需要获取设备原生的物理分辨率（固定宽高，不受旋转影响），可以通过WidgetsBinding获取窗口的原生物理尺寸：

final window = WidgetsBinding.instance.window;
final nativePhysicalSize = window.physicalSize;
// 这里的nativePhysicalSize是设备原生的物理尺寸，比如手机竖屏时的1080x1920，平板横屏时的2048x1536
final nativeAspectRatio = nativePhysicalSize.width / nativePhysicalSize.height;

注意：部分设备的window.physicalSize可能仍会随系统旋转变化，此时还是用取最大值/最小值的方法更稳妥。

内容的提问来源于stack exchange，提问作者Shahbaz Hashmi