响应式设计不生效：网页电脑与手机端切换不同图片失败如何解决

问题根因 #

你写的JS脚本执行时机错误：

• 脚本放在<head>标签内，会在浏览器解析到<body>里的DOM元素之前就运行，此时document.getElementById("change")获取到的是null，修改图片src的逻辑自然不会生效。

修复方案 #

方案1：调整脚本放置位置 #

把JS代码移到<body>标签末尾，保证执行时元素已经被加载完成：

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <link rel="icon" href="favicon.ico" />
  <style>
    .image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    }
        
    body {
      background-color: rgb(30, 30, 30);
    }
  </style>
</head>
<body>
  
  <div class="image">
    <img id="change" src="computer.png" class="image">
  </div>

  <script>
    // 也可以把判断条件换成 window.innerWidth < 768 这类自定义断点，匹配常见移动端宽度阈值更准确
    if (screen.width < screen.height) {
        document.getElementById("change").src = "phone.png";
    }
  </script>
</body>
</html>

方案2：添加DOM加载完成监听 #

如果不想移动脚本位置，可以给逻辑套上DOMContentLoaded事件监听，等整个DOM树解析完成后再执行逻辑：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (screen.width < screen.height) {
        document.getElementById("change").src = "phone.png";
    }
  })
</script>

额外优化建议 #

如果只是需要响应式切换图片，用HTML原生的<picture>标签实现更稳定，不需要写JS，还能自动适配窗口缩放场景：

<div class="image">
  <picture>
    <!-- 窗口宽度小于768px时加载phone.png -->
    <source media="(max-width: 767px)" srcset="phone.png">
    <!-- 默认加载电脑端图片 -->
    <img src="computer.png" class="image">
  </picture>
</div>

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