用户在移动设备上缩小后如何防止网站宽度问题？

Question

Here's the page in question。请注意，该问题也存在于网站的其他部分，至少在我的 iPhone 13 Pro Max 上。

我从类似问题的答案中尝试了许多元标记、脚本解决方案和 CSS 调整，但到目前为止没有任何效果。有没有办法使用 HTML/CSS/JS 解决网站宽度问题？

这是我一直在尝试（但失败）使用的两种方法：

1. 强制移动浏览器在缩放后重新计算宽度
2. 完全防止用户缩放影响背景（可能还有标题），但允许用户缩放以放大链接图像元素。

这是我为 .section-background 元素设置样式的 CSS，但该问题似乎会影响所有站点元素（请参阅图像的标题和网格在缩放后略微缩放和左移）：

.section-background {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
position: fixed !important;
height: 100vh !important;
aspect-ratio: initial !important;
max-height: 100vh;
overflow-x: hidden !important;
overflow-y: hidden !important;
pointer-events: none !important;
cursor: default !important;
width: 100vw !important;
z-index: 0 !important;
}

Answer 1

使用以下 CSS 解决了缩放后的网站宽度问题：

.code-block {
position: absolute !important;
top: 0;
left: 0;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
}