Flutter MediaQuery.of(context).size.width 检查设备大小总是在 iOS 模拟器中返回相同的错误值

Question

I'm working on a Flutter-App that needs to resize elements on small screens (iPhone 5S, SE, 6S, Galaxy 5S, etc).

In order to do that I'm calling double width = MediaQuery.of(context).size.width , and if that value is below 750 pixels (iPhone 6S Size) the elements get made smaller.

This works excellently on devices, but in the iOS-simulator the value is always something small (~375), no matter which simulated device it runs on. Which basically make seeing if the app works on the simulator unusable afterwards, as it always shows the "small" version.

Is there a better way to get the device-size which works with the iOS-Simulator? Or possibly other ways to adapt to the screen-size?

Answer 1

You can use

import 'dart:ui';
window.physicalSize.width; // This will return the physical pixels.

Answer 2

I figured it out! Turns out there are "logical" pixels (which the system is outputting here) and "device" pixels, which are calculated by reading out the ratio between those two.

This is used when a "pixel" can have sub-pixels, like when the never iDevices greatly increased their actual resolution, but the pixel-counts did not get multiplied by the same factor.

double logicalPixelWidth = MediaQuery.of(context).size.width;
double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
double devicePixelWidth = logicalPixelWidth * devicePixelRatio;