手机访问本地HTML教程：局域网测试Web页面完全指南

本教程详细介绍如何在本地创建HTML测试页面并通过局域网让手机访问，无需部署到远程服务器。通过Python自带的HTTP服务器，只需几行命令即可在同一WiFi网络下实现手机访问电脑本地Web项目，适用于前端开发调试、移动端响应式测试、局域网演示等场景。教程包含完整代码、IP地址获取方法、防火墙配置和常见问题解决方案。

内容隐藏

前置要求

✅ 安装Python 3.x（Windows系统自带或从python.org下载）
✅ 电脑和手机连接到同一个WiFi网络
✅ 基本的命令行操作知识

快速开始

1️⃣ 创建项目文件夹

mkdir 手机访问
cd 手机访问

2️⃣ 创建HTML测试页面

创建 index.html 文件，可以任意内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机访问测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 500px;
            width: 100%;
            text-align: center;
        }
        
        h1 {
            color: #667eea;
            margin-bottom: 20px;
            font-size: 2em;
        }
        
        .info {
            background: #f5f7fa;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        
        button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎉 手机访问成功！</h1>
        <p>如果你能看到这个页面，说明你的手机已经成功连接到本地服务器了。</p>
        
        <div class="info">
            <div><strong>设备信息：</strong><span id="device"></span></div>
            <div><strong>浏览器：</strong><span id="browser"></span></div>
            <div><strong>屏幕尺寸：</strong><span id="screen"></span></div>
        </div>
        
        <button onclick="alert('交互功能正常！')">点击测试</button>
        
        <div id="time"></div>
    </div>
    
    <script>
        // 设备检测
        function getDeviceType() {
            const ua = navigator.userAgent;
            if (/(tablet|ipad)/i.test(ua)) return "平板设备";
            if (/Mobile|Android|iPhone/i.test(ua)) return "手机设备";
            return "桌面设备";
        }
        
        document.getElementById('device').textContent = getDeviceType();
        document.getElementById('browser').textContent = navigator.userAgent.includes('Chrome') ? 'Chrome' : 'Safari';
        document.getElementById('screen').textContent = window.innerWidth + ' x ' + window.innerHeight;
        
        // 实时时间
        setInterval(() => {
            document.getElementById('time').textContent = new Date().toLocaleTimeString('zh-CN');
        }, 1000);
    </script>
</body>
</html>

3️⃣ 创建服务器启动脚本

创建 server.py 文件：

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import http.server
import socketserver
import socket

def get_local_ip():
    """获取本机局域网IP地址"""
    try:
        s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
        s.connect(("8.8.8.8", 80))
        local_ip = s.getsockname()[0]
        s.close()
        return local_ip
    except Exception:
        return "127.0.0.1"

PORT = 8000
Handler = http.server.SimpleHTTPRequestHandler

local_ip = get_local_ip()

print("\n" + "="*60)
print("🚀 HTTP 服务器已启动!")
print("="*60)
print(f"\n📱 在手机浏览器中访问：\n")
print(f"   http://{local_ip}:{PORT}\n")
print("="*60)
print("💡 提示：")
print("   - 确保手机和电脑在同一WiFi网络")
print("   - 按 Ctrl+C 停止服务器")
print("="*60 + "\n")

with socketserver.TCPServer(("", PORT), Handler) as httpd:
    try:
        httpd.serve_forever()
    except KeyboardInterrupt:
        print("\n\n服务器已停止")

4️⃣ 启动服务器

python server.py

服务器启动后会显示：

============================================================
🚀 HTTP 服务器已启动!
============================================================

📱 在手机浏览器中访问：

   http://192.168.31.143:8000

============================================================
💡 提示：
   - 确保手机和电脑在同一WiFi网络
   - 按 Ctrl+C 停止服务器
============================================================

5️⃣ 手机访问

确保手机连接到与电脑相同的WiFi
打开手机浏览器（Safari、Chrome等）
输入服务器显示的地址（如：http://192.168.31.143:8000）
查看测试页面

详细步骤

IP地址说明

局域网IP地址通常以以下格式开头：

192.168.x.x – 最常见的家庭/办公室网络
10.x.x.x – 企业网络
172.16.x.x 到 172.31.x.x – 部分企业网络

⚠️ 注意：169.254.x.x 是Windows自动分配的地址，表示网络配置有问题，不能用于局域网访问。

手动获取IP地址

如果需要手动查看IP地址：

Windows系统：

ipconfig

查找 “无线局域网适配器 WLAN” 或 “以太网适配器” 下的 “IPv4 地址”

使用Python简单方法启动

如果不需要自动显示IP，最简单的方法：

python -m http.server 8000

然后手动查询IP地址，在手机浏览器访问 http://你的IP:8000

文件说明

index.html

响应式设计，自动适配手机和电脑
显示设备信息（设备类型、浏览器、屏幕尺寸）
包含实时时钟
交互测试按钮

server.py

自动获取并显示本机局域网IP地址
启动HTTP服务器在8000端口
提供清晰的访问提示
支持Ctrl+C优雅退出

使用方法

开发调试流程

启动服务器
```
python server.py
```
编辑HTML文件
- 使用任意文本编辑器修改 index.html
- 保存后在手机浏览器刷新页面即可看到更新
查看效果
- 手机浏览器访问显示的地址
- 测试响应式布局
- 验证移动端交互
停止服务器
- 在终端按 Ctrl+C

自定义端口

修改 server.py 中的端口号：

PORT = 8080  # 改为你想要的端口

测试多个页面

在同一目录下创建多个HTML文件：

http://IP:8000/index.html
http://IP:8000/page2.html
http://IP:8000/test.html

服务器会自动提供目录下所有文件。

应用场景

✅ 适用场景：

前端开发调试
移动端响应式测试
局域网内演示项目
快速分享HTML文件
PWA测试（需HTTPS）

❌ 不适用场景：

生产环境部署
公网访问
需要后端逻辑
需要数据库连接

总结

通过Python自带的HTTP服务器，我们可以轻松实现手机访问本地HTML页面，无需任何额外安装或配置。核心要点：

✅ 创建HTML文件
✅ 获取正确的局域网IP（192.168.x.x）
✅ 启动HTTP服务器
✅ 确保同一WiFi网络
✅ 配置防火墙允许访问

这种方法简单高效，特别适合前端开发者进行移动端调试和快速演示。

Last Updated: 18 1 月, 2026 at 9:25 下午

版权声明：
本文标题：手机访问本地HTML教程：局域网测试Web页面完全指南
本文链接：https://haoyelaiga.com/%e6%89%8b%e6%9c%ba%e8%ae%bf%e9%97%ae%e6%9c%ac%e5%9c%b0html%e6%95%99%e7%a8%8b%ef%bc%9a%e5%b1%80%e5%9f%9f%e7%bd%91%e6%b5%8b%e8%af%95web%e9%a1%b5%e9%9d%a2%e5%ae%8c%e5%85%a8%e6%8c%87%e5%8d%97/
版权所有：好嘢
转载请保留出处，谢谢合作！