移动端"Sign in with Google"按钮样式优化问题

方案1：通过父容器强制缩放iframe #

利用CSS缩放属性，针对移动端媒体查询调整按钮容器的显示比例，绕开iframe内部样式无法修改的限制：

@media (max-width: 768px) {
  .g_id_signin {
    transform: scale(1.2); /* 根据实际需求调整缩放比例 */
    transform-origin: left top; /* 保持按钮原有对齐位置 */
  }
}

注意要给父容器预留足够空间，避免缩放后按钮溢出页面。

方案2：修改Google生成代码的内置参数 #

Google生成的按钮代码支持直接调整尺寸参数，手动修改以下属性即可优化移动端显示：

<div class="g_id_signin"
     data-client_id="YOUR_CLIENT_ID"
     data-size="large" <!-- 将默认的medium改为large，增大按钮基础尺寸 -->
     data-width="100%" <!-- 强制按钮占满父容器宽度，适配移动端屏幕 -->
     data-theme="outline"
     data-text="signin_with">
</div>

data-width="100%"会让按钮自动适配父容器宽度，比固定宽度更贴合小屏幕布局。

方案3：给父容器设置最小宽度 #

通过给按钮父容器设置最小宽度，强制iframe适配这个宽度，保证移动端按钮不会过小：

.g_id_signin {
  min-width: 240px; /* 移动端的最小显示宽度，可按需调整 */
  width: 100%;
}

结合媒体查询，还能在不同尺寸的移动设备上设置不同的最小宽度值。

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