解决浏览器翻译弹窗导致中文页面字符错乱

现象解析

浏览器打开网页时，会弹出一个 “翻译英语页面” 的提示。

翻译英语页面

这时如果按了回车或者翻译，对于中文页面，就有可能出现字符错乱。

这是因为我们使用框架提供的 cli 创建的页面，默认 html 标签可能是 en，就会触发浏览器的翻译功能。

设置 lang

如 cra 生成的 react 项目，在 public/index.html 中设置：

<html lang="zh">

next.js 中设置

创建 pages/_document.js，重写 Document：

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    // 设置 <html lang="zh"
    <Html lang="zh">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

现象解析

浏览器打开网页时，会弹出一个 “翻译英语页面” 的提示。

翻译英语页面

这时如果按了回车或者翻译，对于中文页面，就有可能出现字符错乱。

这是因为我们使用框架提供的 cli 创建的页面，默认 html 标签可能是 en，就会触发浏览器的翻译功能。

设置 lang

如 cra 生成的 react 项目，在 public/index.html 中设置：

<html lang="zh">

next.js 中设置

创建 pages/_document.js，重写 Document：

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    // 设置 <html lang="zh"
    <Html lang="zh">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}