Chrome/Safari 输入字段点击时自动放大

Question

我有一个反应应用程序，我正在其中输入字段，
在移动设备上，
有自动缩放功能，可以突出显示缩放

我发现的一种方法是使用字体大小：16px

input{ font-size:16px;}

我的问题是，如果我取消选择输入字段并且屏幕缩小，有没有办法自动缩小？这会破坏屏幕

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />

Answer 1

您可以做的是调整输入 focus 和 blur 事件上的视口元标记来控制缩放行为，而不禁用用户可扩展性。

这是一个代码沙箱示例

解决方案：

const App = () => {
  useEffect(() => {
    const handleFocus = () => {
      const viewport = document.querySelector('meta[name="viewport"]');
      viewport.setAttribute(
        "content",
        "width=device-width, initial-scale=1, maximum-scale=1"
      );
    };

    const handleBlur = () => {
      const viewport = document.querySelector('meta[name="viewport"]');
      viewport.setAttribute(
        "content",
        "width=device-width, initial-scale=1, maximum-scale=10"
      );
    };

    const inputs = document.querySelectorAll("input, textarea, select");

    inputs.forEach((input) => {
      input.addEventListener("focus", handleFocus);
      input.addEventListener("blur", handleBlur);
    });

    return () => {
      inputs.forEach((input) => {
        input.removeEventListener("focus", handleFocus);
        input.removeEventListener("blur", handleBlur);
      });
    };
  }, []);

  return (
    <div>
      <input
        type="text"
        placeholder="Type here..."
        style={{ fontSize: "16px" }}
      />
      <textarea
        placeholder="Type here..."
        style={{ fontSize: "16px" }}
      ></textarea>
      <select style={{ fontSize: "16px" }}>
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
    </div>
  );
};