如何在带有上下文的 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 像素 phone 屏幕（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 更新他们的图书馆。不要指望它会很快发生。

如何在带有上下文的 Google (GSI) 按钮上设置响应宽度

How to set responsive width on a Sign in with Google (GSI) button with context

css

google-signin

破解

正解