frontend/android: capture textzoom and set custom base font size

Android textZoom only increases font-size without incresing
surrounding elements which can break the layout and cause
overlapping text and elements.

This commit reads the current textzoom, sets a custom CSS base
font size (calculated from textzoom) and resets textzoom to 100%.

The custom CSS is using 'The 62.5% Font Size Trick' with which
1rem equals 10px.

With this it is possible to change elment dimensions from px to
rem. These elements will become responsive and also grow if
Android settings for font size is increased.

To simulate this in webdev and optimize the layout for increased
fontsize a base font size of 125% has to be set.

Author: thisconnect

frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java

@@ -77,6 +77,8 @@ public class MainActivity extends AppCompatActivity {
 
     private String location = "";
 
+    private int currentZoom;
+
     // This is for the file picker dialog invoked by file upload forms in the WebView.
     // Used by e.g. MoonPay's KYC forms.
     private ValueCallback<Uri[]> filePathCallback;
@@ -221,12 +223,31 @@ public void run() {
         // For MoonPay WebRTC camera access.
         vw.getSettings().setMediaPlaybackRequiresUserGesture(false);
 
+        // Retrieve the current text zoom setting to adjust the base font size in the WebView.
+        currentZoom = vw.getSettings().getTextZoom();
+
         vw.setWebViewClient(new WebViewClient() {
             @Override
             public void onPageFinished(WebView view, String url) {
                 // The url is not correctly updated when navigating to a new page. This allows to
                 // know the current location and to block external requests on that base.
                 view.evaluateJavascript("window.location.pathname", path -> location = path);
+
+                // Calculate the base font size for html as a percentage.
+                // This percentage dynamically adjusts to ensure 1rem = 10px, scaled according to the current zoom level.
+                double baseFontSizePercentage = 62.5 * (currentZoom / 100.0);
+
+                // The default body font size in rem, which is independent of the zoom level.
+                // This size does not scale dynamically with zoom adjustments and is fixed at 1.6rem.
+                double defaultFontSizeREM = 1.6;
+
+                // Reset the WebView's text zoom to 100% to ensure that the scaling is controlled via CSS
+                // and not by the WebView's default scaling behavior.
+                view.getSettings().setTextZoom(100);
+
+                // Execute the CSS setup in the WebView.
+                view.evaluateJavascript(cssSetup, null);
+
             }
             @Override
             public WebResourceResponse shouldInterceptRequest(final WebView view, WebResourceRequest request) {