textScaleFactor not working on web when text scale change in Browser/System Level

[tsinis]

Hey Flutter Team!

There is problem with textScaleFactor in web builds inside Chrome (desktop versions, i have tested on Windows 10). It's just ignored in fact. For example, if user have text scaling in Windows set to 125% i can do nothing about it in my web site made with Flutter, because textScaleFactor parameters (set to 1.0 in Text()) is overrides by those system settings. So fonts become messy... Same code hover working properly on Android platform (as an APK).

I believe there should be labels: "a: typography", "☸ platform-web" .

Steps to Reproduce

1. Run flutter create textscalefactor.
2. Swap lib/main.dart with main.dart file from attachment
   textScalFactor.zip
3. Change Scale and layout in Settings (Display Settings) to anything bigger then 100%
4. Run cd textscalefactor
5. Run
   flutter run -d chrome --release --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true or just flutter run -d chrome

Expected results:
Fonts should have sizes defined in TextStyle's fontSize parameter. Please see screenshots in attachment ZIP file.

Actual results:
Fonts have sizes multiplied by % from system's font scale settings. Please see screenshots in attachment ZIP file.

Logs

PS C:\Users\tsinis\Documents\GitHub\textscalefactor> flutter run -d chrome  --verbose
[  +39 ms] executing: [C:\Android\flutter/] git -c log.showSignature=false log -n 1 --pretty=format:%H
[  +79 ms] Exit code 0 from: git -c log.showSignature=false log -n 1 --pretty=format:%H
[   +1 ms] 3018d8ddb3b40156b6d5a32ee4deaaa80277ea71
[   +1 ms] executing: [C:\Android\flutter/] git describe --match v*.*.* --first-parent --long --tags
[  +62 ms] Exit code 0 from: git describe --match v*.*.* --first-parent --long --tags
[   +1 ms] v1.15.10-0-g3018d8ddb
[  +10 ms] executing: [C:\Android\flutter/] git rev-parse --abbrev-ref --symbolic @{u}
[  +50 ms] Exit code 0 from: git rev-parse --abbrev-ref --symbolic @{u}
[   +1 ms] origin/dev
[        ] executing: [C:\Android\flutter/] git ls-remote --get-url origin
[ +100 ms] Exit code 0 from: git ls-remote --get-url origin
[   +3 ms] https://github.com/flutter/flutter.git
[ +132 ms] executing: [C:\Android\flutter/] git rev-parse --abbrev-ref HEAD
[  +48 ms] Exit code 0 from: git rev-parse --abbrev-ref HEAD
[   +1 ms] dev
[  +77 ms] Artifact Instance of 'AndroidMavenArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterWebSdk' is not required, skipping update.
[   +5 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[  +64 ms] executing: C:\Android\platform-tools\adb.exe devices -l
[  +27 ms] Exit code 0 from: C:\Android\platform-tools\adb.exe devices -l
[   +1 ms] List of devices attached
[  +15 ms] Artifact Instance of 'AndroidMavenArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[   +4 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[ +359 ms] Generating C:\Users\tsinis\Documents\GitHub\textscalefactor\android\app\src\main\java\io\flutter\plugins\GeneratedPluginRegistrant.java
[ +193 ms] Launching lib\main.dart on Chrome in debug mode...
[ +171 ms] Serving DevTools at http://127.0.0.1:50227

[  +12 ms] Updating assets
[ +149 ms] Syncing files to device Chrome...
[  +84 ms] Generating C:\Users\tsinis\Documents\GitHub\textscalefactor\android\app\src\main\java\io\flutter\plugins\GeneratedPluginRegistrant.java
[  +49 ms] <- reset
[  +14 ms] C:\Android\flutter\bin\cache\dart-sdk\bin\dart.exe C:\Android\flutter\bin\cache\artifacts\engine\windows-x64\frontend_server.dart.snapshot --sdk-root
C:\Android\flutter\bin\cache\flutter_web_sdk/ --incremental --target=dartdevc -Ddart.developer.causal_async_stacks=true --output-dill
C:\Users\tsinis\AppData\Local\Temp\flutter_tool.5beaafe9-5f32-11ea-b922-2818783214f0\app.dill --libraries-spec
file:///C:/Android/flutter/bin/cache/flutter_web_sdk/libraries.json --packages C:\Users\tsinis\Documents\GitHub\textscalefactor\.packages -Ddart.vm.profile=false
-Ddart.vm.product=false --bytecode-options=source-positions,local-var-info,debugger-stops,instance-field-initializers,keep-unreachable-code,avoid-closure-call-instructions
--enable-asserts --track-widget-creation --filesystem-root C:\Users\tsinis\AppData\Local\Temp\flutter_tools.5beaafea-5f32-11ea-b922-2818783214f0 --filesystem-scheme
org-dartlang-app --platform file:///C:/Android/flutter/bin/cache/flutter_web_sdk/kernel/flutter_ddc_sdk.dill
[  +20 ms] <- compile org-dartlang-app:///web_entrypoint.dart
[+21322 ms] Syncing files to device Chrome... (completed in 21,478ms, longer than expected)
[   +2 ms] Synced 20.6MB.
[        ] <- accept
[ +271 ms] [CHROME]:
[  +28 ms] [CHROME]:DevTools listening on ws://127.0.0.1:50249/devtools/browser/b7b9be9a-8a2f-44f4-a33e-a4ebd7fd1464
[+6711 ms] Debug service listening on ws://127.0.0.1:50286/sLCDppapvyI=

[ +561 ms] Debug service listening on ws://127.0.0.1:50286/sLCDppapvyI=
[   +3 ms] Warning: Flutter's support for web development is not stable yet and hasn't
[        ] been thoroughly tested in production environments.
[        ] For more information see https://flutter.dev/web
[   +1 ms]   To hot restart changes while running, press "r". To hot restart (and refresh the browser), press "R".
[   +1 ms] For a more detailed help message, press "h". To quit, press "q".

PS C:\Users\tsinis\Documents\GitHub\textscalefactor> flutter analyze 
Analyzing textscalefactor...                                            
No issues found! (ran in 4.6s)

PS C:\Users\tsinis\Documents\GitHub\textscalefactor> flutter doctor -v
[√] Flutter (Channel dev, v1.15.10, on Microsoft Windows [Version 10.0.17763.1075], locale en-US)
    • Flutter version 1.15.10 at C:\Android\flutter
    • Framework revision 3018d8ddb3 (18 hours ago), 2020-03-04 20:46:01 -0800
    • Engine revision 7df0a6e35e
    • Dart version 2.8.0 (build 2.8.0-dev.11.0 8e5354dccb)

 
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at C:\Android\
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = C:\Android
    • ANDROID_SDK_ROOT = C:\Android\tools
    • Java binary at: C:\Android\openjdk\bin\java
    • Java version OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_242-b08)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • CHROME_EXECUTABLE = C:\Users\tsinis\AppData\Local\Google\Chrome SxS\Application\chrome.exe

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).

[√] Connected device (2 available)
    • Chrome     • chrome     • web-javascript • unknown
    • Web Server • web-server • web-javascript • Flutter Tools

! Doctor found issues in 1 category.

[iapicca]

Hi @tsinis
I see the same on beta

screenshot

code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (BuildContext context, Widget child) => MediaQuery(
        data: MediaQuery.of(context).copyWith(textScaleFactor: 5.0),
        child: child,
      ),
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title, textScaleFactor: 1),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
}

logs

nevercode@Nevercodes-MacBook-Air sixth_march % flutter run -d chrome --release --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true --verbose
[  +30 ms] executing: [/Users/nevercode/development/flutter/] git -c log.showSignature=false log -n 1 --pretty=format:%H
[  +58 ms] Exit code 0 from: git -c log.showSignature=false log -n 1 --pretty=format:%H
[        ] fabeb2a16f1d008ab8230f450c49141d35669798
[        ] executing: [/Users/nevercode/development/flutter/] git describe --match v*.*.* --first-parent --long --tags
[  +50 ms] Exit code 0 from: git describe --match v*.*.* --first-parent --long --tags
[        ] v1.14.6-0-gfabeb2a16
[  +15 ms] executing: [/Users/nevercode/development/flutter/] git rev-parse --abbrev-ref --symbolic @{u}
[  +19 ms] Exit code 0 from: git rev-parse --abbrev-ref --symbolic @{u}
[        ] origin/beta
[        ] executing: [/Users/nevercode/development/flutter/] git ls-remote --get-url origin
[  +17 ms] Exit code 0 from: git ls-remote --get-url origin
[        ] https://github.com/flutter/flutter.git
[  +72 ms] executing: [/Users/nevercode/development/flutter/] git rev-parse --abbrev-ref HEAD
[  +14 ms] Exit code 0 from: git rev-parse --abbrev-ref HEAD
[        ] beta
[   +9 ms] executing: sw_vers -productName
[  +26 ms] Exit code 0 from: sw_vers -productName
[        ] Mac OS X
[        ] executing: sw_vers -productVersion
[  +21 ms] Exit code 0 from: sw_vers -productVersion
[        ] 10.15.3
[        ] executing: sw_vers -buildVersion
[  +25 ms] Exit code 0 from: sw_vers -buildVersion
[        ] 19D76
[  +50 ms] Artifact Instance of 'AndroidMavenArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterWebSdk' is not required, skipping update.
[   +6 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[  +59 ms] executing: /Users/nevercode/Library/Android/sdk/platform-tools/adb devices -l
[   +7 ms] Exit code 0 from: /Users/nevercode/Library/Android/sdk/platform-tools/adb devices -l
[        ] List of devices attached
[  +24 ms] executing: /Users/nevercode/development/flutter/bin/cache/artifacts/libimobiledevice/idevice_id -h
[  +70 ms] executing: /usr/bin/xcode-select --print-path
[  +10 ms] Exit code 0 from: /usr/bin/xcode-select --print-path
[        ] /Applications/Xcode.app/Contents/Developer
[   +1 ms] executing: /usr/bin/xcodebuild -version
[+1261 ms] Exit code 0 from: /usr/bin/xcodebuild -version
[   +3 ms] Xcode 11.3.1
           Build version 11C504
[   +5 ms] /usr/bin/xcrun simctl list --json devices
[ +170 ms] Artifact Instance of 'AndroidMavenArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[   +4 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[ +219 ms] Generating /Users/nevercode/Desktop/projects/sixth_march/android/app/src/main/java/io/flutter/plugins/GeneratedPluginRegistrant.java
[ +187 ms] Launching lib/main.dart on Chrome in release mode...
[        ] Building application for the web...
[ +176 ms] Generating /Users/nevercode/Desktop/projects/sixth_march/android/app/src/main/java/io/flutter/plugins/GeneratedPluginRegistrant.java
[  +10 ms] Compiling lib/main.dart for the Web...
[  +24 ms] Initializing file store
[  +38 ms] Done initializing file store
[ +152 ms] invalidated build due to missing files: /Users/nevercode/Desktop/projects/sixth_march/packages/flutter_tools/lib/src/build_system/targets/web.dart
[  +11 ms] web_entrypoint: Starting due to {InvalidatedReason.inputMissing}
[   +3 ms] web_entrypoint: Complete
[+2240 ms] Skipping target: dart2js
[  +64 ms] Skipping target: web_release_bundle
[  +59 ms] Skipping target: web_service_worker
[   +1 ms] Persisting file store
[   +8 ms] Done persisting file store
[  +23 ms] Compiling lib/main.dart for the Web... (completed in 2.6s)
[  +17 ms] Building application for the web... (completed in 2.8s)
[+1302 ms] Warning: Flutter's support for web development is not stable yet and hasn't
[        ] been thoroughly tested in production environments.
[        ] For more information see https://flutter.dev/web
[        ] 🔥  To hot restart changes while running, press "r". To hot restart (and refresh the browser), press "R".
[ +183 ms] For a more detailed help message, press "h". To quit, press "q".
[+176020 ms] Performing hot restart...
[  +43 ms] Generating /Users/nevercode/Desktop/projects/sixth_march/android/app/src/main/java/io/flutter/plugins/GeneratedPluginRegistrant.java
[   +8 ms] Compiling lib/main.dart for the Web...
[   +1 ms] Initializing file store
[  +16 ms] Done initializing file store
[  +61 ms] invalidated build due to missing files: /Users/nevercode/Desktop/projects/sixth_march/packages/flutter_tools/lib/src/build_system/targets/web.dart
[   +1 ms] web_entrypoint: Starting due to {InvalidatedReason.inputMissing}
[   +1 ms] web_entrypoint: Complete
[+2184 ms] dart2js: Starting due to {InvalidatedReason.inputChanged}
[+22901 ms] dart2js: Complete
[  +74 ms] web_release_bundle: Starting due to {InvalidatedReason.inputChanged, InvalidatedReason.outputChanged}
[  +57 ms] web_release_bundle: Complete
[  +77 ms] web_service_worker: Starting due to {InvalidatedReason.inputChanged}
[  +35 ms] web_service_worker: Complete
[   +2 ms] Persisting file store
[   +5 ms] Done persisting file store
[   +6 ms] Compiling lib/main.dart for the Web... (completed in 25.4s)
[  +17 ms] Performing hot restart... (completed in 25.5s)
[        ] Recompile complete. Page requires refresh.

flutter doctor -v

nevercode@Nevercodes-MacBook-Air sixth_march % flutter doctor -v
[✓] Flutter (Channel beta, v1.14.6, on Mac OS X 10.15.3 19D76, locale en-EE)
    • Flutter version 1.14.6 at /Users/nevercode/development/flutter
    • Framework revision fabeb2a16f (5 weeks ago), 2020-01-28 07:56:51 -0800
    • Engine revision c4229bfbba
    • Dart version 2.8.0 (build 2.8.0-dev.5.0 fc3af737c7)


[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/nevercode/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.3.1, Build version 11C504
    • CocoaPods version 1.9.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 43.0.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[✓] VS Code
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.8.1

[✓] Connected device (2 available)
    • Chrome     • chrome     • web-javascript • Google Chrome 80.0.3987.132
    • Web Server • web-server • web-javascript • Flutter Tools

• No issues found!

thank you for reporting this

[tsinis]

Hey! Any update on this? This bug makes Flutter Web unusable in Chrome on Windows and Linux (and I believe on some Retina Display Macs) platforms In term of responsive layouts, UX and so on. Because we cannot predict user's Font Scale settings in OS on those platforms.

Here you can find screenshots from recent Ubuntu's Chrome, textScaleFactor 1.0 is also ignored, because of override with system "Large Fonts" settings turned on...
linux_chrome_textScaleFactor_ignored.zip
Thanks!

[mdebbar]

I looked into this for a bit, but I couldn't find a way to access the system text scale factor inside the browser. If you've seen other web apps doing this, I would love to learn more.

[roman-petrov]

@mdebbar, maybe window.devicePixelRatio will do the job?..

[mdebbar]

@roman-petrov window.devicePixelRatio affects all pixels in the window, it's not specific to text. We already use dpr to render the correct resolution in flutter web.

[tsinis]

I looked into this for a bit, but I couldn't find a way to access the system text scale factor inside the browser. If you've seen other web apps doing this, I would love to learn more.

Hi! Unfortunately, I also have not seen examples, where it is implemented with system-wide scaling. My knowledge does not yet allow me to even hint which way you need to look ... If this is not yet possible to implement, please add information to the parameter that it does not yet work on desktop OSs. So whether or not to close the Issue is up to you now. Thanks anyway!

[roman-petrov]

@mdebbar, sorry for such dummy solution, I still have no deep context on this. Just created a Fiddle, maybe we can get something from code like this https://jsfiddle.net/csb3yLwv/1/ ?

UPD. Again, this is makes no sense, this canvas / DOM text measurements on this Fiddle gives the same 1.0 scale when system font scale changed. Sorry for disturbing you.

[mdebbar]

@roman-petrov no worries. As you found out, canvas and DOM always provide the same measurements regardless of system text scale.

@tsinis I'll keep the issue open for tracking purposes, but I wouldn't expect any work to be done on this unless the browser exposes an API to read system text scale factor.

[TahaTesser]

code sample

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (BuildContext context, Widget child) => MediaQuery(
        data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
        child: child,
      ),
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title, textScaleFactor: 2.0),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
}

flutter doctor -v

[✓] Flutter (Channel master, 1.24.0-8.0.pre.97, on Microsoft Windows [Version 10.0.19042.610], locale en-US)
    • Flutter version 1.24.0-8.0.pre.97 at C:\Code\flutter_master
    • Framework revision 4c24eb10b8 (57 minutes ago), 2020-11-05 11:18:00 +0100
    • Engine revision e66a720137
    • Dart version 2.12.0 (build 2.12.0-21.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at C:\Code\sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: C:\Code\android-studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.7.7)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.7.30621.155
    • Windows 10 SDK version 10.0.18362.0

[✓] Android Studio (version 4.1.0)
    • Android Studio at C:\Code\android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[✓] VS Code (version 1.50.1)
    • VS Code at C:\Users\taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.16.0

[✓] Connected device (5 available)
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • Windows (desktop)       • windows       • windows-x64    • Microsoft Windows [Version 10.0.19042.610]
    • Web Server (web)        • web-server    • web-javascript • Flutter Tools
    • Chrome (web)            • chrome        • web-javascript • Google Chrome 86.0.4240.183
    • Edge (web)              • edge          • web-javascript • Microsoft Edge 86.0.622.61

• No issues found!

[yjbanov]

Today I learned from one of our internal teams how this works. Browsers on many OSes do not report text scale factor separately from device-pixel ratio. For example, when you change UI scale factor on Windows, or enable "Large text" in Linux Accessibility settings, all you get is a new value of devicePixelRatio. Browser zoom (Ctrl + +/-, or Cmd + +/-) change the devicePixelRatio further.

As @mdebbar says above, Flutter Web already respects the devicePixelRatio. Users can use it to scale the UI to make it easier to read. However, this scales all of the logical pixels, not just text. For example, this will also increase paddings, distances between widgets, and stroke widths.

Separately from those controls, some browsers allow you to change the font scale. For example, in Chrome/Edge you can go to browser settings and search for "font size". You will get a dropdown letting you pick between: very small, small, medium, large, very large. Changing this setting will change the default font size, but it will not change the devicePixelRatio. This is the value that we should wire up to PlatformDispatcher.textScaleFactor.

According to the following pages, typically the default font size in browsers is 16px:

• https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
• https://stackoverflow.com/questions/29511983/is-the-default-font-size-of-every-browser-16px-why

We can therefore compute the textScaleFactor by reading the computed style of the <html> element and dividing it by 16.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.