在移动设备普及的当下，很多前端学习者或者开发者会有在手机上运行html代码的需求，比如测试页面在移动端的适配效果，或者临时查看自己写的简单页面效果，其实有多种可行的方法可以实现这个需求。
方法一：通过手机文件管理器直接打开
这是最简单直接的方法，适合运行没有复杂依赖的静态html文件，操作步骤如下：
- 先把写好的html文件保存到手机的存储目录中，比如新建一个叫html_test的文件夹，把文件放进去，文件后缀要正确是.html
- 打开手机自带的文件管理器，找到刚才保存的html文件
- 点击该文件，选择用手机浏览器打开，就能直接看到html代码的渲染效果
这种方法的局限性比较明显，如果html代码中引用了同目录下的其他资源文件，比如css文件、js文件或者图片，只要路径是相对路径，一般也能正常加载，但如果涉及到跨域请求或者需要服务器环境的代码，就无法正常运行。
方法二：使用手机端代码编辑器运行
现在有很多适配手机的轻量级代码编辑器，自带预览功能，不需要额外操作就能运行html代码，这里以常用的Acode编辑器为例，操作步骤如下：
- 在手机应用商店搜索下载Acode编辑器，安装完成后打开
- 点击新建文件，选择html类型，或者直接打开本地已有的html文件
- 编辑完成代码后，点击右上角的预览按钮，就能直接看到运行效果
这类编辑器的优势是可以在手机上直接编写和修改代码，实时预览效果，适合临时修改代码或者学习的时候使用，部分编辑器还支持连接远程服务器，同步代码到电脑端。
方法三：搭建简易本地服务器运行
如果html代码需要服务器环境，比如涉及到ajax请求或者需要读取本地服务接口，就可以通过在手机上搭建简易本地服务器的方式运行，这里以Termux终端工具为例，操作步骤如下：
首先安装Termux，然后执行以下命令安装nodejs环境：
pkg update pkg install nodejs
安装完成后，进入存放html文件的目录，比如刚才的html_test目录：
cd /sdcard/html_test
然后创建一个简单的nodejs服务器文件，比如叫server.js，代码如下：
const http = require('http');
const fs = require('fs');
const path = require('path');
const server = http.createServer((req, res) => {
// 获取请求的文件路径
let filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url);
// 获取文件扩展名
let extname = path.extname(filePath);
// 设置默认的内容类型
let contentType = 'text/html';
// 根据扩展名设置对应的内容类型
switch(extname) {
case '.js':
contentType = 'text/javascript';
break;
case '.css':
contentType = 'text/css';
break;
case '.json':
contentType = 'application/json';
break;
case '.png':
contentType = 'image/png';
break;
case '.jpg':
contentType = 'image/jpg';
break;
}
// 读取文件
fs.readFile(filePath, (err, content) => {
if(err) {
if(err.code === 'ENOENT') {
// 文件不存在
res.writeHead(404, {'Content-Type': 'text/html'});
res.end('<h1>404 页面不存在</h1>');
} else {
// 服务器错误
res.writeHead(500);
res.end('服务器错误: ' + err.code);
}
} else {
// 成功返回文件
res.writeHead(200, {'Content-Type': contentType});
res.end(content);
}
});
});
const PORT = 3000;
server.listen(PORT, () => {
console.log('服务器运行在 http://127.0.0.1:' + PORT);
});
把需要运行的html文件命名为index.html，和server.js放在同一个目录下，然后执行以下命令启动服务器：
node server.js
打开手机浏览器，访问http://127.0.0.1:3000，就能看到html代码的运行效果，这种方式支持大部分需要服务器环境的html代码运行。
不同方法对比
为了帮助大家选择适合自己的方法，这里整理了三种方法的对比信息：
| 方法 | 适用场景 | 操作难度 | 支持功能 |
|---|---|---|---|
| 文件管理器直接打开 | 简单静态html文件，无复杂依赖 | 低 | 仅支持静态页面渲染，不支持服务器相关功能 |
| 手机代码编辑器 | 临时编写修改代码，实时预览 | 中 | 支持静态页面，部分支持简单服务器功能 |
| 搭建本地服务器 | 需要服务器环境的html代码，复杂项目测试 | 高 | 支持大部分服务器相关功能，适配性好 |
注意事项
- 如果html代码中使用了
<meta name="viewport" content="width=device-width, initial-scale=1.0">标签，在手机上运行的时候能更好地适配屏幕宽度，避免出现页面过宽需要左右滑动的情况 - 使用本地服务器方法的时候，如果手机有安装安全软件，可能需要给Termux授予存储访问权限，否则无法读取到本地的html文件
- 在线编辑器的使用方式也可以作为补充，在手机浏览器中搜索在线html编辑器，粘贴代码后也能直接运行，不过这种方式不适合运行本地资源较多的html文件