Apache自动索引子目录在手机竖屏模式下尺寸小于主目录的调整问题

哥们，我来帮你捋捋这个问题。你用的是Apache的自动索引功能生成的目录页面，主目录显示正常，但子目录在手机竖屏里尺寸偏小，大概率是样式引用路径不对或者CSS没有覆盖到自动索引的默认样式导致的，给你几个针对性的解决办法：

1. 确保CSS在所有目录都能正确加载 #

你的主目录里有index.css，但子目录的自动索引页面（Apache自动生成的）可能找不到这个CSS文件——如果主页面用的是相对路径href="index.css"，那子目录里的页面会去自己的目录下找，自然找不到，就会用Apache默认的小字体样式。

解决办法：

• 把CSS引用改成绝对路径：比如在自定义的头部文件里写 <link rel="stylesheet" href="/index.css">（开头的/表示网站根目录，不管在哪个子目录都能找到主目录的CSS）
• 让Apache的自动索引页面加载这个自定义头部：
  1. 在网站根目录创建一个header.html文件，内容就放上面那行CSS引用代码
  2. 在根目录的.htaccess里添加以下配置：

  Options +Indexes
  HeaderName /header.html
  

  这样不管是主目录还是子目录的自动索引页面，都会加载这个头部里的CSS，样式就能统一了。

2. 针对自动索引的表格布局调整响应式样式 #

Apache自动索引默认用表格展示目录内容，你需要在index.css里添加针对手机竖屏的媒体查询，强制统一表格元素的字体和尺寸：

/* 手机竖屏适配 */
@media (max-width: 767px) {
  /* 覆盖Apache默认的表格样式 */
  table {
    width: 100% !important;
    font-size: 16px; /* 和你主目录页面的字体大小保持一致 */
    border-collapse: collapse;
  }
  td, th {
    padding: 8px 4px; /* 调整内边距，让内容不拥挤 */
    font-size: inherit;
  }
  /* 确保目录链接的大小统一 */
  table a {
    font-size: inherit;
    line-height: 1.5;
  }
}

这样就能让子目录的自动索引页面在手机上的字体和布局和主目录保持一致。

3. 检查子目录的配置 #

如果子目录有自己的.htaccess文件，要确保它没有覆盖主目录的配置——比如不要写Options -Indexes或者修改HeaderName，否则子目录的自动索引会不加载你自定义的头部和CSS。

备注：内容来源于stack exchange，提问作者user77899