Skip to content

Commit

Permalink
frontend: debug and display calculated base font and screen width
Browse files Browse the repository at this point in the history
For debugging purpose this will render the calculated increased
base font size and the screen width.

The screen width can vary depending on Android display size setting.
  • Loading branch information
thisconnect committed May 5, 2024
1 parent 73f4580 commit f4dde88
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,12 @@ public void onPageFinished(WebView view, String url) {
// This size does not scale dynamically with zoom adjustments and is fixed at 1.6rem.
double defaultFontSizeREM = 1.6;

// Set the base font-size on the html element dynamically and apply a fixed font size to the body.
// Also, set a custom data attribute 'data-test' to the calculated base font size percentage for potential debugging.
String cssSetup = "document.documentElement.style.fontSize = '" + baseFontSizePercentage + "%';" +
"document.body.style.fontSize = '" + defaultFontSizeREM + "rem';" +
"document.body.setAttribute('data-test', '" + baseFontSizePercentage + "%');";

// 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);
Expand Down
5 changes: 5 additions & 0 deletions frontends/web/src/components/layout/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ const Header = ({
}
return false;
};
const test = document.body.getAttribute('data-test');
const width = window.screen.width;

return (
<div className={[style.container, sidebarStatus ? style[sidebarStatus] : ''].join(' ')}>
Expand All @@ -62,6 +64,9 @@ const Header = ({
<a href="#" onClick={toggle} className={[style.guideIcon, guideShown ? style.disabled : ''].join(' ')}>
<GuideActive />
{t('guide.toggle.open')}
<sup>
({test} {width}px)
</sup>
</a>
</span>
)
Expand Down

0 comments on commit f4dde88

Please sign in to comment.