React 网站按钮和输入在智能手机上不起作用

Question

这是一个简单的网站：
https://www.tradecalc.eu
该网站在桌面浏览器中正常运行。但它不能在智能手机上正常工作（只能在“计算机模式”下工作）。无法使用所有“按钮”和“输入”。浏览器控制台中没有错误。至少我没有注意到这些。该网站建立于：

React（挂钩）
React 路由器（HashRouter）
Bootstrap:
import 'bootstrap/dist/css/bootstrap.css'; 在“index.js”文件中。

“按钮”和“输入”最重要的代码：

<input
    id="price"
    name="price"
    type="number"
    step="0.01"
    min="0.1"
    className="form-control"
    autoFocus
    required
    onChange={e => setPrice(e.target.value)} />

<input
    id="percent"
    name="percent"
    type="number"
    min="0"
    className="form-control"
    required
    onChange={e => setPercent(e.target.value)} />

<select
    name="currency"
    id="currency"
    className="form-control"
    onChange={e => setCurrency(e.target.value)}>
    {currencyList.map(({ label, value }) => (
       <option key={value} value={value}>
         {label}
       </option>
    ))}
</select>

表单“按钮”：

<button type="submit" className="btn btn-secondary mr-2">Count</button>
<button type="reset" className="btn btn-outline-secondary" onClick={() => setCount(0)}>Reset</button>

其余“按钮”：

<Link type="button" className="btn btn-secondary btn-sm" to="/">
   Back to Trade Calc
</Link>

<a href="https://www.linkedin.com/in/" target="_blank" rel="noreferrer">
   <img src={linkedin} alt="LinkedIn" />
</a>

<Link style={{ color: "red" }} to="/donation">
   Make a Donation
</Link>

<Link style={{ color: "black" }} to="/privacy">
   Privacy & Cookies Policy
</Link>

如果您需要更多代码，请告诉我。

Answer 1

JS 没问题，但 CSS/Markup。您的 Cookie 横幅与表单重叠。如果您尝试 Tab（从键盘）导航到下一个选项卡，您会看到它会为您工作，但由于容器 react-cookienotice-* 位于表单顶部，因此您将无法在 input 字段中输入值。

React 网站按钮和输入在智能手机上不起作用

React website buttons and inputs don't work on smartphone

reactjs

button

input

react-router

smartphone