Next.js 控制微信字体大小本文主要探讨如何在使用 Next.js 构建的 Web 应用中，解决微信浏览器默认放大

代码如下

// 控制ios微信浏览器字体大小用css
import "./globals.css";
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <>
      <html lang="en">
        <body>
          {children}
          // 控制安卓微信浏览器字体大小，用js
          <Script src="/fixedFontSize.js" strategy='beforeInteractive' />
        </body>
      </html>
    </>
  );
}

/* 禁止微笑放大字体 */
body{
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}

注意：js引用放public里面

(function () {
  if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
    handleFontSize();
  } else {
    if (document.addEventListener) {
      document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
    } else if (document.attachEvent) {
      //IE浏览器，非W3C规范
      document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
    }
  }
  function handleFontSize() {
    // 设置网页字体为默认大小
    console.log(WeixinJSBridge);
    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 1 });
    // 重写设置网页字体大小的事件
    WeixinJSBridge.on('menu:setfont', function () {
      WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 1 });
    });
  }
})();