能否在iframe中加载网站的移动端版本？

• 模拟移动端用户代理（User-Agent）
  多数网站通过用户代理字符串识别设备类型，你可以用JavaScript修改iframe的UA，让服务器返回移动端版本：

  const iframe = document.getElementById('target-iframe');
  iframe.contentWindow.navigator.__defineGetter__('userAgent', function() {
    return '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';
  });
  iframe.src = 'https://目标网站地址';
  

  注意：部分现代浏览器可能限制UA修改操作，需要实际测试兼容性。

• 直接指定移动端站点地址
  很多网站设有专门的移动端子域名（如m.example.com）或路径（如example.com/mobile），直接将iframe的src指向这类地址，就能直接加载适配移动端的版本，无需额外模拟UA。

• 注入viewport适配标签
  如果目标网站没有正确配置viewport，可能出现压缩显示的情况。若你无法修改目标网站代码，可通过srcdoc封装页面并注入viewport标签：

  <iframe 
    srcdoc="<html><head><meta name='viewport' content='width=device-width, initial-scale=1.0'></head><body><iframe src='https://目标网站地址' style='width:100%;height:100%;border:none;'></iframe></body></html>" 
    style="width:375px;height:667px;border:none;"
  ></iframe>
  

  这个方法会在iframe内部嵌套一个子iframe，确保页面按移动端规则渲染。

• 匹配手机屏幕尺寸设置iframe宽高
  根据你透明手机图片的屏幕实际分辨率（比如常见的375x667、390x844），设置iframe的宽高为对应数值，配合移动端站点的响应式设计，就能完美贴合手机屏幕的显示效果。

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