VSCode Live Server页面显示过大无响应，DevTools却显示正常

使用VSCode Live Server运行页面时，整个页面显示过大，且无响应式效果，但在Chrome DevTools中显示完全正常。

页面显示对比 #

• 屏幕中的显示效果：
• DevTools中的显示效果：

相关CSS代码 #

@media screen and (min-width: 1200px) {
  .section-center {
    width: 95vw;
    grid-template-columns: 1fr 1fr;
  }
  .photo {
    height: 150px;
  }
}

• 补全viewport元标签：这是响应式页面的核心前提，必须在HTML头部添加，否则高DPI屏幕或移动设备会出现显示缩放异常：

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

• 强制刷新清缓存：Live Server偶尔会加载旧缓存，按Ctrl+Shift+R强制刷新页面，或者在VSCode设置里搜索Live Server: Disable Cache并勾选开启。
• 重置浏览器缩放：检查浏览器缩放比例是否为100%，按Ctrl+0快速重置，缩放异常会导致页面显示比例失调。
• 完善基础样式：当前只定义了大屏的媒体查询规则，中小屏没有对应样式，给.section-center设置基础宽度（比如max-width: 1170px; width: 90vw;），确保默认状态下的显示正常。
• 检查Live Server访问地址：确保是通过http://localhost:xxxx或本地IP访问，不要直接打开本地HTML文件。

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