Evite que un elemento fijo cambie de tamaño al hacer zoom en la pantalla táctil

En un sitio web HTML, tiene un elemento fijo como este:

Some content

Tiene este CSS:

 #fixed { height:150px; position:fixed; top:0; left:0; z-index:10000; } 

Cuando ve esta página en un dispositivo móvil (o cualquier dispositivo con pantalla táctil) y pellizca la pantalla para acercar, el elemento fijo se acerca con el rest del contenido (se hace más grande). Cuando amplías lo suficiente, se vuelve tan grande que casi se superpone por completo a todo el contenido debajo de él.

Un caso de uso práctico sería una interfaz de usuario como una barra de navegación fija en la parte superior, o un botón flotante en la esquina de la pantalla.

¿Cómo podría evitar que un elemento cambie de tamaño en el navegador y que permanezca del mismo tamaño todo el tiempo?

Demostración a esta respuesta
Dialog widget library que escribí en base a esta respuesta .
Demostración para el widget de diálogo Pruébelo en el dispositivo móvil, amplíe el zoom y toque el enlace.

Si bien el evento de gesto parece contener algunos metadatos sobre el factor de escala de algo , podríamos tener un mejor control y encontrarlo manualmente. Como queremos mantener el efecto mientras el usuario se mueve en vivo, necesitamos volver a calcularlo durante cada evento de desplazamiento.

 window.addEventListener('scroll', function(e){ /* coming next */ }) 

Calculamos el factor de zoom y lo aplicamos al elemento reescalado como una transformación CSS3:

 el.style["transform"] = "scale(" + window.innerWidth/document.documentElement.clientWidth + ")"; 

Esto reescalará el elemento de nuevo a la relación de zoom 1 con respecto al zoom de la ventana gráfica actual, pero es probable que todavía esté colocado incorrectamente en la página. Esto significa que tenemos que obtener nuevos valores para su posición. Lo que sucederá realmente en la pantalla dependerá del valor de posición CSS del elemento, el comportamiento fixed será diferente al absolute y en Safari móvil específicamente, la posición fixed tiene un efecto suavizado mientras se amplía la página, lo que crea algunos problemas inconvenientes para esta causa: Sugeriría tener un elemento de altura de contenido del 100% como elemento primario relative para el elemento escalado deseado, luego en su secuencia de comandos, coloque su elemento absolute dentro del elemento principal. Los siguientes valores funcionan para esta demostración de ejemplo:

 overlay.style.left = window.pageXOffset + 'px'; overlay.style.bottom = document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px'; 

También puede prestar atención al uso transform-origin propiedad de CSS de transform-origin dependiendo de desde qué punto de anclaje desee que tenga efecto la escala, esto tiene un efecto directo en la alineación.

Estoy buscando hacer lo mismo que @bobsoap estaba tratando de hacer PERO Mi solución es la siguiente:

1. Deshabilita el zoom en la etiqueta de su ventana gráfica:

  

2. Utilice un complemento como: TouchSwipe.js:

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

Y solo amplíe la div o divs que desee y se adapte a sus necesidades.

Tengo 2 divs en una página (izquierda y derecha) El div izquierdo tiene un menú de desplazamiento fijo y el derecho tiene texto e imágenes pequeños. Quiero pellizcar / acercar y tengo solo el zoom div correcto para que el usuario pueda leer el texto mejor si es necesario. En lugar de hacer zoomable la vista completa e inhabilitar el zoom en mi div izquierdo, estoy haciendo exactamente lo contrario: hacer solo mi div zoomable a través del complemento TouchSwipe.

Compartiré mi código cuando haya terminado si alguien está interesado en cómo implementé el complemento TouchSwipe.

Le falta un atributo de ancho y puede usar elementos como max-width y max-height para mantener el tamaño del cuadro que desea. Sin embargo, el zoom le permite al usuario obtener una página bastante granular, por lo que siempre habrá una posibilidad de que tengan ese problema.

 #fixed { height:150px; width: 200px; max-width: 200px; max-height: 150px; position:fixed; top:0; left:0; z-index:10000; }