时间戳

首页 > 解决方案 > 如何在带有上下文的 Google 登录 (GSI) 按钮上设置响应宽度

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

问题描述

我从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" />

标签： cssgoogle-signin

解决方案

哈克

我使用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>

适当的解决方案

等待谷歌更新他们的图书馆。不要指望它会很快发生。

推荐阅读