为何1920x1080分辨率下网站初始显示过度放大？

客户设备分辨率1920x1080、浏览器缩放100%时，Angular开发的网站初始显示极度放大，仅缩放到67%时显示正常。已引入Bootstrap（不确定是否必要），添加了viewport元标签和1680-1920px的媒体查询，但未适配更小屏幕。

1. 媒体查询匹配失效：当前用的min-device-width/max-device-width是匹配设备物理分辨率，而非浏览器实际视口宽度。1920x1080设备可能因系统显示缩放、浏览器设置，实际视口宽度小于1680px，导致媒体查询没触发，页面加载了默认的超大样式（比如400px的.headline字体）。
2. 固定单位依赖过度：页面元素大量用position: absolute配合固定像素值（如top: 350px、font-size: 50px），没使用视口相对单位（vw/vh）或rem，视口尺寸不匹配时元素直接溢出、过度放大。
3. 根容器高度异常：.home-page设了height: 100%，但如果父元素（html、body）没同步设置height: 100%，会导致容器高度计算错误，影响背景和元素定位。

1. 修正媒体查询逻辑 #

把设备宽度查询改成视口宽度查询，调整断点范围确保1920x1080视口能匹配到正确样式：

/* 替换原有的1680-1920px媒体查询 */
@media only screen and (min-width: 1200px) and (max-width: 1920px) {
    .person { height: 85%; }
    .headline { font-size: 240px; letter-spacing: 40px; }
    .about-dr-alex { font-size: 30px; top: 220px; left: 40px; }
    /* 保留原有其他适配样式 */
}

/* 给更大屏添加基础样式 */
@media only screen and (min-width: 1921px) {
    .headline { font-size: 320px; letter-spacing: 45px; }
    .about-dr-alex { font-size: 40px; top: 280px; }
    /* 按需调整其他元素尺寸 */
}

2. 用相对单位替代固定像素 #

把固定像素值改成视口单位（vw/vh）或rem，让元素尺寸随视口自动缩放：

/* 示例：修改.headline为vw单位 */
.headline {
    font-size: 20vw; /* 1920px视口下约384px，接近原设计的400px，可微调 */
    letter-spacing: 2.6vw;
}

/* 定位值改用vh/vw */
.about-dr-alex {
    top: 18vh;
    left: 2.6vw;
    font-size: 2.6vw;
}

.person {
    height: 80vh;
    left: 10vw;
}

3. 修复根容器高度 #

在全局样式里设置html和body的高度：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 避免横向滚动条 */
}

4. 优化Bootstrap引入（可选） #

如果Bootstrap没被充分使用，直接移除减少冗余；要是保留，确保正确引入响应式网格系统辅助布局：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

5. 补充中小屏幕适配 #

添加针对小屏的媒体查询，逐步完善适配：

@media only screen and (max-width: 1199px) {
    .headline { font-size: 15vw; letter-spacing: 2vw; }
    .about-dr-alex { font-size: 3vw; top: 15vh; }
    .specialist-plastic-surgeon { font-size: 2.5vw; top: 8vh; }
    .barcode { display: none; } /* 隐藏移动端不需要的元素 */
}

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