如何修改通过window.open()打开窗口的UserAgent？是否可行？

核心原理 #

要让Bing识别当前访问的是移动设备，核心是修改请求的User-Agent标识，同时配合设置移动设备的窗口尺寸，多维度模拟移动环境。

具体实现步骤 #

• 先定义一个标准的移动设备User-Agent字符串（以iPhone为例）：

  const mobileUA = "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1";
  

• 打开新窗口并修改UA：

  // 打开指定尺寸的新窗口，模拟移动设备屏幕
  const mobileWindow = window.open('https://www.bing.com', '', 'width=375,height=667');
  
  // 等待窗口加载完成后重写User-Agent
  mobileWindow.onload = function() {
    // 重写navigator.userAgent的获取逻辑
    Object.defineProperty(mobileWindow.navigator, 'userAgent', {
      get: () => mobileUA
    });
    // 刷新页面让Bing重新识别设备信息
    mobileWindow.location.reload();
  };
  

• 进阶调试方案（适合开发场景）：
  如果UA修改不生效，可以借助浏览器调试协议强制切换移动视图，示例代码如下：

  mobileWindow.onload = function() {
    // 设置移动设备的尺寸、缩放等参数
    mobileWindow.devtools.send('Emulation.setDeviceMetricsOverride', {
      width: 375,
      height: 667,
      deviceScaleFactor: 2,
      mobile: true,
      screenWidth: 375,
      screenHeight: 667
    });
    // 同时修改UA
    Object.defineProperty(mobileWindow.navigator, 'userAgent', {
      get: () => mobileUA
    });
  };
  

注意点 #

• 部分浏览器出于安全限制，可能禁止在非调试环境下修改navigator.userAgent，这种情况下可以尝试直接在打开窗口的URL中通过其他方式传递标识（但多数网站不支持）。
• 除了UA，Bing还会检测屏幕尺寸、触摸事件支持等，所以设置窗口的移动尺寸很有必要。

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