HTML/CSS页面PC正常移动端CSS失效，求问题排查

问题排查与修复方案 #

1. 关键CSS语法错误 #

你的body标签的background-image属性末尾缺少分号，部分移动端浏览器对语法容错性较低，会导致后续CSS代码解析失败，这是页面全白的核心原因：

/* 错误写法 */
body {
  background-image: url('https://dvclub.co.uk/wp-content/uploads/2020/06/Italian-Summer-Cocktails.jpg')
}

/* 修复后 */
body {
  background-image: url('https://dvclub.co.uk/wp-content/uploads/2020/06/Italian-Summer-Cocktails.jpg');
}

2. Viewport标签顺序优化 #

将<meta name="viewport">移至<head>最顶部，确保浏览器优先识别移动端视口设置，避免布局异常：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css"/>
  <title>Bar Menu</title>
</head>

3. 字体兼容性处理 #

shrikhand字体并非所有移动端系统都预装，添加系统默认字体作为降级选项，避免字体加载失败导致文本显示异常：

h1 {
    text-align: center;
    font-family: 'Shrikhand', impact, sans-serif;
}

4. 背景图片加载验证 #

若修复后背景仍不显示，可临时将背景替换为纯色测试，排除图片加载问题（比如网络限制、HTTPS/HTTP混合内容拦截）：

body {
  /* 临时测试用纯色背景 */
  background-color: #f0e6d6;
  background-image: url('https://dvclub.co.uk/wp-content/uploads/2020/06/Italian-Summer-Cocktails.jpg');
}

5. CSS文件路径确认 #

确保手机端访问时，styles.css的相对路径正确。若HTML与CSS不在同一目录，需调整路径（如./css/styles.css），且手机与电脑需处于同一局域网（本地开发场景）。

内容的提问来源于stack exchange，提问作者Stefano carlo Sebis