如何在HTML页面中加载网站的移动端版本作为外部网页

响应式网站（比如维基百科）是通过请求头中的User-Agent和**页面视口(viewport)**识别设备类型，返回对应样式的。你之前使用的frameset是HTML已废弃的技术，且未配置移动端所需的视口和设备标识，因此加载的是桌面端样式。

方案1：直接使用网站的移动端专属域名（推荐） #

多数响应式网站会提供移动端专属域名（比如维基百科的en.m.wikipedia.org），直接访问该域名即可获取移动端样式，无需额外配置：

<!DOCTYPE html>
<html>
<head>
    <title>移动端视图嵌入</title>
    <!-- 设置视口适配移动端设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        /* 让页面和iframe占满全屏，无多余边距 */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <!-- 使用维基百科移动端域名 -->
    <iframe src="https://en.m.wikipedia.org/wiki/HTML_element#Frames"></iframe>
</body>
</html>

方案2：模拟移动端User-Agent（适用于无专属移动端域名的网站） #

如果目标网站没有提供移动端域名，需要通过JavaScript模拟移动端请求头，并配置视口：

<!DOCTYPE html>
<html>
<head>
    <title>移动端视图嵌入</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        #mobile-iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <iframe id="mobile-iframe"></iframe>

    <script>
        // 模拟iPhone的User-Agent，可根据需要替换为其他移动端UA
        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";
        const iframe = document.getElementById('mobile-iframe');

        // 通过fetch设置移动端UA请求页面，再注入iframe
        fetch('https://en.wikipedia.org/wiki/HTML_element#Frames', {
            headers: { 'User-Agent': mobileUA }
        })
        .then(res => res.text())
        .then(html => {
            iframe.contentDocument.open();
            iframe.contentDocument.write(html);
            iframe.contentDocument.close();
        })
        .catch(err => {
            console.error('加载失败:', err);
            // 跨域失败时降级为直接加载（此时可能仍为桌面端样式）
            iframe.src = 'https://en.wikipedia.org/wiki/HTML_element#Frames';
        });
    </script>
</body>
</html>

关键说明 #

• viewport元标签：强制页面以设备宽度渲染，确保移动端布局正常显示。
• User-Agent：告诉服务器当前请求来自移动设备，触发响应式样式逻辑。
• 废弃frameset：frameset已从HTML5标准中移除，使用iframe是符合规范的替代方案。

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