在iframe中加载页面时，网站无法指示浏览器伪装成移动的浏览器。
您需要框架中的页面可以在不同的URI下访问，该URI将默认提供移动的内容和样式表，而不是使用任何类型的检测（无论是媒体查询，用户代理嗅探还是其他）。

在iframe中，让第三方网站像在移动的浏览器中一样加载的唯一方法是浏览器本身发送适当的用户代理字符串。这不是网站开发人员可以控制的。
然而，如果你可以请求页面内容服务器端，你将发出http请求，并可以控制你发送给其他服务器的用户代理字符串。在.Net中，你可以创建一个新的HttpWebRequest对象，并在发出请求之前设置UserAgentString。
请记住，这实际上是在“欺骗”其他服务器，使其返回针对某些平台的内容。当您回复客户端的请求时，您也会从您的服务器呈现其他人的内容。请务必检查您正在处理的任何网站内容的服务条款，以确保这不是一个问题。

好吧..但la建议的React是不那么真实..这是可能的查看一个网站作为一个智能手机在iframe..当然，该网站必须准备与响应式设计方法..但这是可能的
按照以下3个步骤：在步骤#2 css代码中编辑IFrame的大小和边框。
1.)创建页面到框架创建一个名为“framepage. htm”的新网页，并具有响应式设计功能（例如我的简单博客），它将显示在IFrame窗口中。2.）添加IFrame嵌入代码选择并复制以下代码。将其粘贴到HTML网页的内容区域，您希望IFrame窗口出现的位置。

<iframe name="Framename" src="http://mlaynessanchez.blogspot.com" width="400" height="200" frameborder="0" scrolling="auto" class="frame-area">
</iframe>

字符串
3.)添加CSS代码在模板global style .css文件的底部选择、复制并粘贴以下css。css的高度和宽度将覆盖IFrame HTML代码。使用高度、宽度、边框和溢出选项编辑以下内容。
以下代码适用于响应式和非响应式网页。

.frame-area {
  display: block;
  width: 100%;  /* RESPONSIVE WIDTH */
  max-width: 400px;
  height: 300px;
  overflow: auto;  /* EDIT TO hidden FOR NO SCROLLBAR */
  border: #999999 1px solid;
  margin: 0px;
  padding: 0px;
  }

型
如果你没有一个全局css文件，将上面的代码添加到你网页的head部分，就在下面标签之间的标签之前。

<style type="text/css">
  /* css code goes here */
</style>

型
来源：http://allwebco-templates.com/support/S_script_IFrame.htm

示例React/Nextjs指南为移动的屏幕生成类似iframe的内容：

import React from 'react';

export default function Page() {
  return (
    <div className="mobile-phone">
      <div className="screen">
        <iframe
          src="https://datalawcompanion.org/"
          style={{
            width: '100%',
            border: 'none',
            height: '100%',
          }}
        />
      </div>
    </div>
  );
}

字符串
一些款式：

/************** IFRAME SECTION STYLING *************/
.mobile-phone {
  position: relative;
  width: 375px; 
  height: 667px; 
  margin: auto;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
  overflow: hidden;
}

.screen {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 60px;
  overflow: hidden;
}

.mobile-phone::after {
  content: '';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  background: #333;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

型