如何调整Giscus评论嵌入脚本的显示尺寸？

直接设置width属性无效是因为Giscus通过iframe渲染评论区，需要通过CSS控制容器或iframe本身的样式来调整尺寸，以下是两种可行方案：

方案一：用容器包裹脚本限制尺寸 #

将Giscus的脚本放在一个带有宽度限制的容器内，让iframe自动继承容器的尺寸：

<div style="max-width: 800px; margin: 0 auto;">
  <script src="https://giscus.app/client.js"
          data-repo="你的仓库名"
          data-repo-id="你的仓库ID"
          data-category="你的分类"
          data-category-id="你的分类ID"
          data-mapping="pathname"
          data-strict="0"
          data-reactions-enabled="1"
          data-emit-metadata="0"
          data-input-position="bottom"
          data-theme="light"
          data-lang="zh-CN"
          crossorigin="anonymous"
          async>
  </script>
</div>

你可以根据网站布局修改max-width的数值（比如700px、90%等），margin:0 auto可以让评论区居中显示。

方案二：直接针对Giscus的iframe设置CSS样式 #

Giscus生成的iframe自带giscus-frame类名，你可以在网站的全局CSS或页面的<style>标签中添加以下样式：

iframe.giscus-frame {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

这种方式不需要修改脚本结构，直接通过CSS控制iframe的最大宽度，同时保持小屏幕下的自适应效果。

内容的提问来源于stack exchange，提问作者Vicent