使用Bootstrap的媒体查询移动端失效，窗口缩放正常问题求助

我添加了如下CSS媒体查询：

@media (max-width: 770px) {
    #title {
        text-align: center;
    }
    .title-image{
        position: static;
        transform: rotate(0);
        width: 70%;
    }
}

浏览器缩放窗口到770px以下时，样式能正常生效（标题居中、标题图片静态无旋转且宽度为70%），但切换到浏览器的移动端设备视图时，无法实现预期布局（预期效果为标题居中、标题图片静态无旋转且宽度为70%），以下是具体排查方向：

• 必须添加视口元标签
  移动端浏览器需要视口标签来正确识别屏幕宽度，缺失的话会用桌面端视口渲染，导致媒体查询不触发。在HTML的<head>中添加：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 核对移动端模拟设备的宽度
  部分浏览器的设备模拟视图（如Chrome DevTools）默认设备宽度可能超过770px（比如iPad横向宽度1024px），此时不会触发目标媒体查询。切换到宽度≤770px的设备（如iPhone系列）再测试。

• 排查CSS选择器优先级冲突
  检查是否有更高优先级的规则覆盖了媒体查询的样式：

  • 行内样式（style属性）优先级高于媒体查询样式
  • 带!important的规则会强制覆盖
  • 更具体的选择器（如.header .title-image）优先级高于.title-image
    用浏览器开发者工具的Elements面板→Styles查看目标元素，若媒体查询规则被划掉，说明被其他样式覆盖。

• 验证媒体查询语法正确性
  再次核对媒体查询的括号、大括号是否闭合，有没有拼写错误（比如max-width是否写错）。

• 检查CSS加载顺序
  确保媒体查询写在所有基础样式的后面，否则基础样式会覆盖媒体查询的规则。

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