手机上打开HTML文件没样式?一个APP搞定!

你有没有遇到过这种情况——

在手机文本大模型APP上自动写了个网页，没提供公网预览或者记录流失了，想用本地手机预览一下效果。信心满满地把HTML文件传到手机，点击打开，结果……

只有光秃秃的文字！

CSS样式全没了，JavaScript交互也没了，整个页面像是回到了2000年。

别慌，这不是你代码写错了，而是手机浏览器的"小脾气"。

为什么手机直接打开HTML会没样式？

这其实是个很常见的坑。当我们在手机上直接点击HTML文件时，浏览器会使用file://协议来打开它。出于安全考虑，很多手机浏览器会限制本地文件加载外部资源——你的CSS、JS、图片可能都被"拒之门外"了。

就好比你请朋友来家里吃饭，结果门锁换了，朋友进不来，只能在门口闻闻香味。

一个APP，让手机变成本地服务器

最近我发现了一个超实用的Android应用：Simple HTTP Server。

它就做了一件事：在你的手机上启动一个HTTP服务器。

这样，你的HTML文件就能通过http://协议正常访问，CSS和JS都能完美加载，就像在电脑上用VS Code的Live Server一样爽。

三步搞定，简单到哭

1. 下载安装在官网（shttps.phlox.dev）下载APK，安装后打开。

2. 选择文件夹把你写好的网页文件（HTML、CSS、JS）放在一个文件夹里，然后在APP里选择这个文件夹作为服务器根目录。

3. 点击启动服务器启动后，APP会显示一个局域网地址（比如http://192.168.1.100:8080）。在手机浏览器里输入这个地址，你的网页就能完美呈现了！

整个过程不到1分钟，比泡碗面还快。

interface为网络接口。默认是lo，仅可本地访问。可以点击选择wlan0或者其他网络接口，就能局域网访问了。

Files下是可以选择本地手机存储的目录的，选择需要本地存储的访问权限，给予后就能选择使用。

点击URL链接后弹出下拉框，点击【Navigate】就可以跳转到浏览器直接预览

不仅仅是预览网页

这个APP还能帮你：

• 在局域网内分享文件电脑传文件到手机？不用数据线，不用微信传，直接浏览器下载。

• 简单文件管理通过网页界面就能新建、删除、重命名文件，还能在线编辑文本文件。

• 多设备测试在手机上启动服务器，电脑、平板、其他手机都能访问，轻松实现多设备同步预览。

哪些人会爱上它？

• 前端开发者：手机端适配调试必备

• 学生党：课程作业需要展示网页，手机就能搞定

• 设计师：给客户演示原型，随时随地

• 极客玩家：折腾各种小项目，方便快捷

写在最后

这个APP解决了一个很小但很痛的问题：在移动设备上正确预览网页。

它不需要复杂的配置，不需要root权限，就是开箱即用。对于经常需要在手机上调试或展示网页的开发者来说，这绝对是个值得收藏的小工具。

下次再遇到手机打开HTML没样式的情况，别再怀疑人生了——开个服务器，一切搞定。

其他的能力还有很多，可以直接在官网上，或者自己进行尝试。

获取方式官网：https://shttps.phlox.dev/

下载地址Marketless version：https://shttps.phlox.dev/releases/

免费版就够用，PLUS版支持更多高级功能。