Flutter中MediaQuery获取iOS模拟器屏幕宽度异常的解决方案咨询

你遇到的核心问题是混淆了逻辑像素和物理像素的概念——Flutter的MediaQuery.of(context).size.width返回的是逻辑像素，而非设备的物理像素。

为什么模拟器里始终返回~375像素？ #

iPhone 6S的物理像素宽度确实是750，但它的逻辑像素宽度是375（因为设备像素密度为2x，物理像素=逻辑像素×像素密度）。iOS模拟器返回的是设备的逻辑尺寸，所以不管你选择哪款模拟设备，拿到的都是对应设备的逻辑宽度：比如iPhone 5S是320，iPhone 6S是375，iPhone 14是390。你之前用750作为阈值，所有设备的逻辑宽度都远低于这个值，自然会一直触发小屏适配逻辑。

修复方案 #

1. 改用逻辑像素作为判断阈值

把判断条件换成基于逻辑像素的阈值，比如针对iPhone 6S及更小的设备（逻辑宽度≤375）做适配：

final mediaQuery = MediaQuery.of(context);
double logicalWidth = mediaQuery.size.width;

if (logicalWidth <= 375) {
  // 小屏设备适配逻辑：缩小字体、调整控件尺寸等
} else {
  // 大屏设备逻辑
}

常见iOS设备的逻辑尺寸参考：

• iPhone 5S/SE（第一代）: 320×568
• iPhone 6/6S/7/8/SE（第二/三代）: 375×667
• iPhone 14: 390×844
• iPhone 14 Pro: 393×852

2. 更优雅的适配方案：避免固定阈值

固定阈值的适配方式不够灵活，推荐用相对尺寸适配所有屏幕：

• 用屏幕宽度的百分比设置控件尺寸/字体大小：

  double fontSize = logicalWidth * 0.045; // 字体大小占屏幕宽度的4.5%
  double buttonWidth = logicalWidth * 0.8; // 按钮宽度占屏幕宽度的80%
  

• 使用LayoutBuilder根据父容器的可用空间动态调整：

  LayoutBuilder(
    builder: (context, constraints) {
      if (constraints.maxWidth < 375) {
        return SmallScreenWidget();
      } else {
        return LargeScreenWidget();
      }
    },
  )
  

• 用FittedBox或AspectRatio组件让控件自适应容器尺寸。

3. 若需获取物理像素（不推荐）

如果确实需要用到物理像素，可以通过像素密度计算：

double physicalWidth = logicalWidth * mediaQuery.devicePixelRatio;

但不建议用物理像素做适配，因为不同设备的像素密度差异很大，逻辑像素才是Flutter中跨设备统一的布局单位。

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