Chrome开发者工具显示的MacBook端网页尺寸存疑求助

• 检查元素高度约束
  先排查是否有父容器设置了固定高度（height: 373px）或max-height限制，也可能是overflow: hidden导致内容被截断。在Elements面板选中<body>或根容器，查看Styles面板里的相关样式规则。

• 验证视口设置
  确认HTML头部的视口元标签是否正确配置，标准设置应为：

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

  缺失或错误的视口配置可能引发页面渲染异常。

• 排查CSS布局问题

  • 若用Flexbox/Grid布局，检查容器的align-items、justify-content属性是否导致内容未撑满高度；
  • 查看是否有元素设置position: absolute后未正确定义高度，脱离文档流后无法撑起父容器；
  • 确认<html>和<body>标签的高度设置，建议添加：

    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    

• 检查开发者工具设备模式
  确认是否误开启了手机/平板等设备模拟视图，点击开发者工具左上角的设备图标，切换回“响应式”或“Desktop”模式，再查看页面实际高度。

• 排查JavaScript动态修改
  检查是否有JS代码动态设置了页面或容器高度，比如document.body.style.height = '373px'，可在Sources面板断点调试相关脚本。

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