Aquí está la página en cuestión . Tenga en cuenta que el problema también existe en el resto del sitio, al menos en mi iPhone 13 Pro Max.

Probé una serie de metaetiquetas, soluciones de secuencias de comandos y ajustes de CSS a partir de las respuestas a preguntas similares, pero hasta ahora nada ha funcionado. ¿Hay alguna forma de solucionar el problema del ancho del sitio usando HTML/CSS/JS?

Estos son los dos enfoques que he estado intentando (y fallando) en usar:

1. Obligar al navegador móvil a recalcular el ancho después de hacer zoom
2. Evitar que el zoom del usuario afecte el fondo (y posiblemente el encabezado), pero permitir que el zoom del usuario amplíe los elementos de la imagen de enlace.

Este es el CSS con el que estoy diseñando el elemento .section-background, pero el problema parece afectar a todos los elementos del sitio (ver el encabezado y la cuadrícula de imágenes ligeramente escalados y desplazados hacia la izquierda después del zoom):

 .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; }