1. The browsing display styles of mobile browsers and PC browsers are inconsistent
In the case of inconsistent display, it is a problem with the renderer selecting auto or specifying html. It needs to be specified as the canvaskit renderer to ensure consistency.
First, the default command to package the official version of the web is: flutter build web --release
One parameter is hidden in it, as follows:
--web-renderer auto, html or canvaskit.
-
auto(Default) - Automatically selects the renderer. Select HTML for mobile browsers and CanvasKit for desktop browsers. -
html- Force use of HTML renderer. -
canvaskit- Force use of CanvasKit renderer.
You can specify the renderer selection after web packaging through parameters, as follows:
Automatically select the renderer: flutter build web --release
Specify the html renderer (there may be inconsistent display effects between the mobile browser and the PC browser, and the size is small): flutter build web --web-renderer html --release
Specify the canvaskit renderer (the display effect is the same, but the size becomes larger): flutter build web --web-renderer canvaskit --release
2. Chinese garbled characters appear when specifying canvaskit
If there is an inexplicable problem, be sure to go to GitHub to find issue. Please refer to PR for the cause of the problem. The way to solve the problem is very simple. Just upgrade the flutter version and enter the following command:
flutter channel master
flutter upgrade -fReference pr:
https://github.com/flutter/flutter/issues/74785
https://github.com/flutter/flutter/issues/73628
Effect before upgrade:
In the following two different renderings, the display effects are different in mobile browsers, even if the code is consistent.
auto default rendering:https://oy-paddy.github.io/flutter_web/web/index.html
Specify canvaskit rendering ( flutter version 2.0.1):https://oy-paddy.github.io/flutter_web/web2/index.html
Effect after upgrade:
Specify canvaskit rendering (flutter version 2.0.3):https://oy-paddy.github.io/flutter_web/web5/index.html
3.Publish
After successful packaging, if you want to access it in the static directory of springboot, or other static folders, please modify the base address of the build/web/index.html file, as follows:
