My understanding of Material-UI 4's responsive font scaling is that it takes the "screen" width and scales font sizes based on certain breakpoints. However, I don't explicitly call responsiveFontSizes()
for my theme, so maybe I'm wrongly assuming that responsive font scaling is involved then this is rather viewport initial scaling? At the moment, I'm using the usual <meta name="viewport" content="width=device-width, initial-scale=1" />
.
The unfortunate outcome is that the same app when viewed on a tablet in landscape mode has significantly larger fonts compared to when viewing the app in portrait mode. This is especially prominent on common 19:10 screens (10:19 in portrait).
How can I set Material-UI's responsive font scaling based on the shorter dimension of the viewport, so that rotating the viewport doesn't result in ugly font size upscaling?