Question

我想将Material-UI与盖茨比一起使用。在usage page上，我必须添加以下响应性元标记：

<meta
  name="viewport"
  content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>

现在，如果我看看盖茨比开始的元标记，它们几乎是相同的：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

因此，基本上，唯一的区别是material-ui要我添加minimum-scale=1。

我的问题是如何更新或替换元视口标记以包含此值。我尝试在基本布局中使用react-helmelt，如下所示：

<Helmet>
  <meta 
    name='viewport'
    content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no'
  />
</Helmet>

但是这样做是给了我两个元视口标签-一个是盖茨比开始的标签，另一个是我通过头盔添加的标签：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no' />

我想要的只是一个元视口标记-包含minimum-scale=1的标记。

关于如何执行此操作的任何想法？

谢谢。

Answer 1

如果您确实需要更改视口元，则需要覆盖Gatsby使用的默认html模板。只需将.cache/default-html.js复制到src/html.js并根据自己的喜好对其进行自定义。

作为一个旁注，我真的怀疑将Gatsby的默认视口元与Material-UI一起使用是否会出现问题。

在GatsbyJS中更新元标记

1 个答案: