移动端网站使用Google登录后页面缩放异常问题求助

问题定位 #

仅移动端竖屏场景下，Google OAuth流程（无论是否完成认证）会导致页面返回后文本缩放异常，刷新页面可恢复，推测是OAuth跳转/弹窗过程修改了浏览器的viewport缩放状态，原页面未自动重置。

无需刷新的优化解决方案 #

1. 动态重置Viewport参数 #

在登录回调或页面从浏览器返回时，强制重置viewport配置，修正缩放状态：

// 重置viewport的核心函数
function resetViewport() {
  const viewportMeta = document.querySelector('meta[name="viewport"]');
  if (viewportMeta) {
    // 先强制锁定缩放，再恢复默认设置
    viewportMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
    setTimeout(() => {
      viewportMeta.content = 'width=device-width, initial-scale=1.0';
    }, 300);
  }
}

// 监听页面显示事件（处理浏览器返回、页面从缓存恢复的场景）
window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    resetViewport();
  }
});

// 在Google登录的成功回调中主动调用
// 比如你当前的登录完成处理函数里加入：
resetViewport();

2. 切换为Google登录弹窗模式 #

如果当前是跳转式OAuth，改用弹窗模式避免离开原页面，从根源减少浏览器状态变更：

// 示例：基于Google Auth SDK的弹窗登录实现
function initGooglePopupLogin() {
  // 确保已加载Google Auth SDK后执行
  gapi.auth2.getAuthInstance().signIn({
    ux_mode: 'popup', // 启用弹窗模式
    prompt: 'select_account'
  }).then(() => {
    // 登录成功后的业务逻辑
    resetViewport(); // 额外保险重置
  });
}

3. CSS全局锁定文本缩放 #

添加CSS规则，强制文本不受浏览器缩放影响：

html {
  /* 禁用各浏览器的文本自动缩放 */
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

4. 触发页面重排修复渲染异常 #

如果上述方法无效，可通过短暂修改DOM触发重排，强制浏览器重新计算布局：

function fixLayoutRender() {
  const body = document.body;
  body.style.display = 'none';
  setTimeout(() => {
    body.style.display = '';
  }, 10);
}

// 登录回调后配合重置viewport使用
resetViewport();
fixLayoutRender();

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