如何通过上下文设置“使用 Google 登录 (GSI)”按钮的响应宽度

Question

我从https://developers.google.com/identity/gsi/web/guides/personalized-button添加了“使用 Google 登录”按钮

默认样式填充整个宽度并且看起来不错：

但如果您有帐户，它会在上下文中显示它：

此上下文添加width到 iframe 内部的元素样式。我知道按照规范 Google 按钮应该在 40-400px 范围内。我想制作页面容器max-width: 400px，但这个按钮根本无法与容器一起缩放。

我是否必须使用 JavaScript 来更新data-width属性，或者是否有 CSS 的正常解决方案？

  <div class="g_id_signin" data-width="400" />

Answer 1

黑客

我使用data-width="328"并匹配了容器max-width: 328px

带内边距的 328 像素可以适合 360 像素的手机屏幕（Moto G4、iPhone 6）。

  <script src="https://cdn.tailwindcss.com"></script>
  ...
  <div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
    <div class="w-full space-y-8" style="max-width: 328px">
      <div class="flex flex-col gap-2">
        <div
          id="g_id_onload"
          class="w-full"
          style="display: none"
          :data-client_id="clientID"
          data-callback="handleGoogleCallback"
          data-auto_prompt="false"
          data-auto_select="true"
        />
        <div
          class="g_id_signin w-full"
          data-type="standard"
          data-size="large"
          data-theme="outline"
          data-shape="rectangular"
          data-text="continue_with"
          data-logo_alignment="center"
          data-width="328"
        />
      </div>
    </div>
  </div>

正确的解决方案

等待 Google 更新他们的库。不要指望它会很快发生。