WordPress主题开发：CSS在移动端不加载但桌面端正常问题求助

1. 修复CSS文件的引入路径问题 #

你当前使用的绝对路径/assets/main.css存在兼容性风险——它基于网站根目录，若网站部署在子目录、服务器配置有差异，就会导致路径解析错误，移动端请求时无法找到文件。

替换成WordPress官方推荐的主题目录URI函数，修改functions.php代码如下：

function enqueue_my_custom_styles() {
    wp_enqueue_style( 'stylesheet', get_stylesheet_directory_uri() . '/assets/main.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_styles');

get_stylesheet_directory_uri()会自动获取当前主题的根目录URL，确保CSS文件路径始终正确。

2. 排查缓存问题 #

移动端浏览器对静态资源的缓存策略更严格，即使修复路径，也可能加载旧的失效资源：

• 清除移动端浏览器缓存，或用隐私模式访问网站
• 若使用WP Rocket、W3 Total Cache等缓存插件，清空插件缓存
• 给CSS文件添加版本号，强制浏览器加载新资源：

wp_enqueue_style( 'stylesheet', get_stylesheet_directory_uri() . '/assets/main.css', array(), '1.0.1' );

3. 检查CSS响应式规则与优先级 #

如果路径正常但样式不生效，可能是自定义CSS本身的问题：

• 排查媒体查询语法错误，比如@media screen and (max-width: 768px)是否正确闭合
• 确认自定义CSS的选择器优先级足够——Bootstrap的样式优先级较高，可给选择器追加主题容器类名提升优先级

4. 验证文件权限 #

确保服务器上assets文件夹权限为755、main.css文件权限为644，权限不足会导致移动端请求返回403错误，样式无法加载。

内容的提问来源于stack exchange，提问作者Nox5692