xampp仅提供本地服务器环境,不参与移动端适配;适配完全由前端代码控制,如viewport设置、rem动态计算和媒体查询等。

XAMPP 本身不参与移动端适配,它只是本地 Web 服务器环境;移动端适配完全由前端代码(HTML/CSS/JS)控制。多端口配置和移动端适配是两件事,但可以共存——你用不同端口跑不同项目(比如一个日版、一个中文版),每个项目各自做 viewport、rem、媒体查询等适配即可。
修改 httpd.conf 添加监听端口
Apache 必须明确知道要监听哪些端口,否则请求根本进不来。Windows/mac 路径略有差异,但逻辑一致:
- 打开
E:\XAMPP\apache\conf\httpd.conf(Windows)或/Applications/XAMPP/xamppfiles/etc/httpd.conf(macOS) - 找到
Listen 80这一行,在下方新增你要的端口,比如:Listen 8080Listen 8081 - 确保这些端口没被其他程序占用(
netstat -ano | findstr :8080或 macOS 用lsof -i :8080检查) - 别删掉
Listen 80,否则localhost默认访问会失效
启用并配置 httpd-vhosts.conf 虚拟主机
光开监听端口不够,Apache 还得知道每个端口该把请求路由到哪个目录。这靠 httpd-vhosts.conf 实现,但默认是禁用的:
XAMPP 8.0.30 是一款免费、开源的跨平台 Web 服务器集成包,专为快速搭建本地 PHP 开发环境而设计。该版本核心组件包括:Apache 2.4.56、MySQL 8.0.33、PHP 8.0.30、phpMyAdmin 5.2.1 等。它支持 Windows、Linux 和 macOS 系统,可让开发者在个人电脑上轻松模拟服务器环境,无需复杂配置即可运行 WordPress、Thin
- 确认
httpd.conf中这行已取消注释:Include conf/extra/httpd-vhosts.conf - 打开
conf/extra/httpd-vhosts.conf,在文件末尾添加类似结构(注意路径用正斜杠或双反斜杠,避免转义错误):<virtualhost><br> ServerName localhost<br> DocumentRoot "E:/XAMPP/htdocs/mobile-jp"<br><directory><br> Options Indexes FollowSymLinks<br> AllowOverride All<br> Require local<br></directory><br></virtualhost>
- 每个
<virtualhost></virtualhost>块必须有独立的<directory></directory>权限声明,Require local比旧式Allow from all更安全且兼容 Apache 2.4+ - 如果想让
localhost仍能访问默认项目,也要为*:80显式配一个<virtualhost></virtualhost>,否则可能 403
移动端适配要自己写,XAMPP 不提供自动支持
配置完端口后,你在 http://localhost:8080 打开的页面,是否适配手机,只取决于你 HTML 里有没有这行:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
其他适配手段也一样:
-
rem基准需 JS 动态设置document.documentElement.style.fontSize,XAMPP 不干涉执行 - 媒体查询(
@media (max-width: 768px))由浏览器解析,和端口无关 - 如果你在某个端口下测试时发现样式错乱,问题一定出在 HTML/CSS/JS,而不是 XAMPP 配置
- 注意:XAMPP 自带的
index.php会跳转到/dashboard/,若你用子目录做移动端项目,务必删掉或重命名根目录下的index.php,否则所有端口都可能被劫持跳转
最容易被忽略的是权限模型切换——Apache 2.4+ 强制使用 Require 指令,但很多老教程还在抄 Order Deny,Allow,导致 500 错误;还有人改了端口却忘了开 httpd-vhosts.conf 的 Include,结果端口监听了,请求却全被路由到默认 htdocs 目录。这两点不检查清楚,再多端口也白搭。










