Katex font size does not match surrounding text on android #3693

fbeleznay · 2022-08-22T06:54:19Z

fbeleznay
Aug 22, 2022

I am trying to include math formulas using KaTeX on a webpage. On a desktop computer it looks good, but on an android tablet the font size for the formulas are smaller than the surrounding text. The ratio is not the 1.21 which I found in the documentation, it is way smaller (and the ratio is different in portrait and in landscape orientation). I tried it on different phones/tablets with the same result. Any ideas on how I can fix this issue? The link to the page I have problem with is http://fbeleznay.web.elte.hu/Steinhaus/proba2.html Here is the source code of the page:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://jsxgraph.org/distrib/jsxgraph.css" />
    <script type="text/javascript" src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js" integrity="sha384-X/XCfMm41VSsqRNQgDerQczD69XqmjOOOwYQvr/uuC+j4OPoNhVgjdGFwhvN02Ja" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>

<style> 

</style>

</head>
<body>
    <h2>1. Exercise on the multiplication table</h2>
    <h3>Problem</h3>
    <p>We construct a sequence of numbers as follows. The first number is \(2\), the next is \(3\), \[2\times 3=6,\] the third number of the sequence is \(6\), \[3\times 6=18,\] the fourth number is \(1\), the fifth is \(8\), \[6\times 1=6,\quad 1\times 8=8,\] the sixth number is \(6\), then follows \(8\),  etc.</p>
    <p>This is the sequence which we obtain: \[2\undergroup{\,}3\undergroup{\,}6\undergroup{\,}1\undergroup{\,}8\undergroup{\,}6\undergroup{\,}8\dots\]</p>
    <p>The little arcs under the numbers denote the multiplication carried out, the result of which follows the last digit of the sequence. For example, we ought to multiply now \(6\) by \(8\) and write down the numbers of the result, namely \(4\), \(8\). There will never be a shortage of numbers for multiplication, since the number of arcs is increased by one with each multiplication and the result will yield at least one new digit.</p>
    <p>Prove that numbers \(5\), \(7\) and \(9\) never appear in this sequence.</p>
</body>

</html>

Answered by edemaine

Aug 22, 2022

I've confirmed that I have the same issue with your site on Chrome on my Android phone.

It seems to have to do with device scaling. If you add <meta name="viewport" content="width=device-width, initial-scale=1">, everything works fine.

I'm not sure whether there's something we can do on the KaTeX side to fix this. If not, we should at least add it to the documentation.

View full answer

edemaine · 2022-08-22T12:56:03Z

edemaine
Aug 22, 2022
Maintainer

I've confirmed that I have the same issue with your site on Chrome on my Android phone.

It seems to have to do with device scaling. If you add <meta name="viewport" content="width=device-width, initial-scale=1">, everything works fine.

I'm not sure whether there's something we can do on the KaTeX side to fix this. If not, we should at least add it to the documentation.

1 reply

fbeleznay Aug 22, 2022
Author

Yes, this indeed works (although I do not really understand why), thank you very much!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Katex font size does not match surrounding text on android #3693

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Katex font size does not match surrounding text on android #3693

fbeleznay Aug 22, 2022

Replies: 1 comment · 1 reply

edemaine Aug 22, 2022 Maintainer

fbeleznay Aug 22, 2022 Author

fbeleznay
Aug 22, 2022

Replies: 1 comment 1 reply

edemaine
Aug 22, 2022
Maintainer

fbeleznay Aug 22, 2022
Author