html - Mathjax 方程在 Android 手机中的渲染很小

问题描述

我正在编写一些包含数学的 HTML 内容，我想让它可用于任何设备，无论是台式机/笔记本电脑还是手机/平板电脑。我的手机有数学问题，基本上它工作得很好，但默认大小是应该的 1/2。我知道这一点，因为如果我“右键单击”任何方程式并选择将所有数学调整为 200% 的选项，那么它显示得很好。这是我的 MWE：

<!DOCTYPE html>
<html>

<head>
    <title>I want long equations to be scrollable</title>
    
    <meta charset="utf-8">
    
    <!-- Math support https://www.mathjax.org/#gettingstarted -->
    <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
      },
      svg: {
        fontCache: 'global'
      }
    };
    </script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <style>
        .numbered_equation_container {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .equation {
            width: 100%;
            overflow-x: auto;
        }
        .equation_number {
            display: table-column;
        }
    </style>
</head>

<body>
    
    <p>This is some paragraph that contains some important equations I want to show you:
    
    <div class="numbered_equation_container">
         <div class="equation">
            $$E=mc^2$$
        </div>
        <div class="equation_number">(1)</div>
    </div>
    
    Now, the following is a very long equation:
    
    <div class="numbered_equation_container">
        <div class="equation">
            $$\frac{dF}{dx}\frac{dx}{dy}\frac{dy}{d\xi}=\intop_{\mathbb{R}}f(\zeta)e^{-\zeta}\cos(w^{2}-\zeta)\
            d\zeta+\frac{3x^{3}+(\nabla\times\boldsymbol{E})\cdot\boldsymbol{B}}{\vec{r}\cdot\vec{E}}+8\pi\hbar+\log\cos\tan\sin\pi$$
        </div>
        <div class="equation_number">&nbsp;&nbsp;&nbsp;&nbsp;(2)</div>
    </div>
    
  This is rendering small in my mobile. I have to "right click" the equations to see the Mathjax options and manually set the font size to 200 % to view them properly. 
    </p>
    
</body>
</html>

Mathjax 可能有一些全局设置，但我在网上找不到任何东西来解决我的问题。

标签： htmlmobilemathjax

html - Mathjax 方程在 Android 手机中的渲染很小

问题描述

解决方案

推荐阅读