Es algo díficil de demostrar como funciona vh y zoom en linea, porque la mayoría de los sitios usan frames de alguna forma u otra. Cuando tu haces zoom con el navegador, el viewport de tu navegador no cambia. Sigue siendo el mismo. El navegador no escala unidades relativas. 50% de un contenedor sigue siendo 50% cuando haces zoom.
Si tu SVG usa unidades absolutas si las escala. Es decir, si tienes un SVG con 500px de alto o 500px de ancho, el navegador escala esas unidades.
Edit: Mira este es un ejemplo que saque de Mozilla:
Código
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect -->
Lo único que hice fue darle un alto de 50vh, puedes hacerle zoom y no le pasa nada al contenedor (esto sin frames). Puedes hacer lo mismo con el % siempre y cuando estés pasando el tamaño del viewport desde la etiqueta HTML (pero para que hacer eso, si puedes usar las unidades de viewport).
No le pasa nada al contenedor pero si al contenido. Al darle zoom aumenta el tamaño de los rectángulos. Si los pongo de banner al hacer zoom o cambiar la resolución se ven más grandes. Si la resolución es baja, se superpone al contenido de la web y solo ves el rectángulo. Cómo me sirve ese código? Es exactamente lo mismoque tenía cona diferencia de que no se mueve, entonces si lo pongo de toolbar, no baja con la web.
Cita de: EdePC
- Pero ese banner no es SVG, ni se ajusta a lo que has pedido al principio, si hago zoom se amplia y reduce también
- Me parece que no estás poniendo la etiqueta meta viewport para que funcione correctamente en dispositivos móviles. Cuando llega a casa lo pruebo en un móvil y hago las capturas ...
En android está bloqueada la página para no hacer zoom no vi ese problema O.o
No sabía si era SVG o no, vi esa barra buscando y decidí pasar la web porque la funcionalidad es muy similar a lo que intento hacer. Prácticmente es lo mismo, pero con las diferencias de que no se amplie al hacer zoom, y que la barra se muestre todo el rato, no solo al bajar por el documento.
Yo tengo muy claro el resultado final que busco, pero igual no lo explico bien, perdonad.
En línea
Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖
Ok, bueno me voy dando cuenta que el zoom en android no es igual que el zoom del escritorio. El código funciona en el navegador de escritorio. Quizás el zoom del móvil es gráfico. No se si haya alguna forma de leer el nivel del zoom y dividir las unidades por el zoom.
Puedes deshabilitar escalar la pagina por meta tags pero me imagino que lo que quieres es que el usuario pueda agrandar otras cosas mientras que una parte se queda igual.
Ok, bueno me voy dando cuenta que el zoom en android no es igual que el zoom del escritorio. El código funciona en el navegador de escritorio. Quizás el zoom del móvil es gráfico. No se si haya alguna forma de leer el nivel del zoom y dividir las unidades por el zoom.
Puedes deshabilitar escalar la pagina por meta tags pero me imagino que lo que quieres es que el usuario pueda agrandar otras cosas mientras que una parte se queda igual.
Sí, tiene retardo y todo si haces zoom muy rápido. Debe tener una capa de software independiente ahí. Si se puede hacer lo que dices, lo comento en el primer post. Se puede hacer con la matriz, pero me parecen demasiadas operaciones y que reacciona mal haciendo cosas raras (en Android). Estoy seguro al 400% que hay otra manera de hacerlo y realmente bien, que quede perfecto. Y lo que tengo yo hecho es basura basura.
Exactamente eso, quiero que se pueda hacer zoom, porque yo lo uso muchísimo para leer a gusto.
Lo peor es que la página es para poder visualizarla toda sin imágenes habilitadas en el navegador. Asique necesito SVG sí o sí.
En línea
Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖
Sí, tiene retardo y todo si haces zoom muy rápido. Debe tener una capa de software independiente ahí. Si se puede hacer lo que dices, lo comento en el primer post. Se puede hacer con la matriz, pero me parecen demasiadas operaciones y que reacciona mal haciendo cosas raras (en Android). Estoy seguro al 400% que hay otra manera de hacerlo y realmente bien, que quede perfecto. Y lo que tengo yo hecho es basura basura.
Exactamente eso, quiero que se pueda hacer zoom, porque yo lo uso muchísimo para leer a gusto.
Lo peor es que la página es para poder visualizarla toda sin imágenes habilitadas en el navegador. Asique necesito SVG sí o sí.
El problema no es SVG. Porque tu a SVG le das dimensiones y todo lo que está dentro de tu SVG escala con el sistema de coordenadas de tu viewbox. Esto es con cualquier elemento. Si el viewport no es consistente através del zoom, lo único que queda son hacks para ajustar los tamaños. Porque aquí ya estás entrando en cosas que no son estándar.
Yo hasta diría que es un bug (pero no lo es). El viewport es prácticamente la ventana por la que ves el contenido. En todo momento 10vh debería ser el 10% del alto de la cual estás viendo el contenido.
- Nop, el Zoom del móvil es como el zoom de la lupa de windows, sirve para agrandar todo, no tiene efecto sobre el viewport, tamaño de letras, etc, es decir te amplia el webview y no el DOM.
- Yo solo utilizo el Android para leer el correo y ver YouTube, para lo demás tengo una Tablet con Windows 10, esta tablet al igual que el android tiene una pantalla táctil que permite hacer zoom sobre el webview del navegador web y aparte puedo usar el zoom del propio navegador web, no son lo mismo, uno actúa como una lupa y el otro cambia el devicePixelRatio o ppp.
- Para que el viewport se adapte al devicePixRatio y no se vea raro (como lo son programas clásicos funcionando en monitores 4k, todo se ve diminuto) se utiliza la etiqueta meta viewport que solo funciona en móviles para corregir este problema (en PC se ignora completamente):
- Los SVG trabajan con el Pixel-Ratio dado por el viewBox (100*15 y 100*10 respectivamente en el ejemplo), por esto puede haber problemas al cambia el tamaño del view-port por ejemplo al pasar del Horizontal al Vertical.
- El SVG en sí, si que puede adaptarse a unidades viewport (en mi caso me da igual usar % ya que el contenedor es bloque al 100%, puedes cambiar width="100%" height="15%" a width="100vw" height="15vh"), pero sus elementos por defecto se alinearán al centro, me parece que esto es lo que estás buscando (fíjate en el svg amarillo por supuesto):
- Sin embargo, es más sencillo hacerlo usar flexbox/grid, aunque dependerá de los items que quieras poner en tu "banner"
- Por cierto, puedes utilizar el gratuito InkScape para hacer el SVG, este programa trabaja netamente con SVG, además tiene la opción de mostrar y editar el código SVG directamente (algo rudimentario), para cosas más complejas Illustrator XD.
Yo me pierdo, ¿Dices que tienes dos modos de hacer Zoom en tu navegador? Al menos mi Google Chrome en mi móvil Android no me deja hacer zoom para nada con el meta tag.
- Nop, el Zoom del móvil es como el zoom de la lupa de windows, sirve para agrandar todo, no tiene efecto sobre el viewport, tamaño de letras, etc, es decir te amplia el webview y no el DOM.
- Yo solo utilizo el Android para leer el correo y ver YouTube, para lo demás tengo una Tablet con Windows 10, esta tablet al igual que el android tiene una pantalla táctil que permite hacer zoom sobre el webview del navegador web y aparte puedo usar el zoom del propio navegador web, no son lo mismo, uno actúa como una lupa y el otro cambia el devicePixelRatio o ppp.
- Para que el viewport se adapte al devicePixRatio y no se vea raro (como lo son programas clásicos funcionando en monitores 4k, todo se ve diminuto) se utiliza la etiqueta meta viewport que solo funciona en móviles para corregir este problema (en PC se ignora completamente):
- Los SVG trabajan con el Pixel-Ratio dado por el viewBox (100*15 y 100*10 respectivamente en el ejemplo), por esto puede haber problemas al cambia el tamaño del view-port por ejemplo al pasar del Horizontal al Vertical.
- El SVG en sí, si que puede adaptarse a unidades viewport (en mi caso me da igual usar % ya que el contenedor es bloque al 100%, puedes cambiar width="100%" height="15%" a width="100vw" height="15vh"), pero sus elementos por defecto se alinearán al centro, me parece que esto es lo que estás buscando (fíjate en el svg amarillo por supuesto):
- Sin embargo, es más sencillo hacerlo usar flexbox/grid, aunque dependerá de los items que quieras poner en tu "banner"
- Por cierto, puedes utilizar el gratuito InkScape para hacer el SVG, este programa trabaja netamente con SVG, además tiene la opción de mostrar y editar el código SVG directamente (algo rudimentario), para cosas más complejas Illustrator XD.
Creo que tal y como está ahora se ve decente. Añadí:
A ver lo del zoom que le hago en PC. Estoy poniendo un url para eliminar la etiqueta y el banner por si se necesita zoom o se quiere ver toda la pantalla para leer más cómodo. Lo acabaré integrando en el banner/toolbar. Tengo en mente convertir el rectángulo en un círculo y dejar el círculo en una esquina para poder restaurar la barra de herramientas. Podría hacer la animación de forma fake con Three. O quizás con D3 sea más fácil que usando SVG para hacerlo de verdad. Se me va a complicar mucho, pero por intentarlo que no quede xD. A ver que hago con el tema de javascript para Tor para mostrar un banner con SVG.
Anda, que buena info! Justo mencionas la etiqueta que puse jajaja. Tengo que probar la página como está en varias resoluciones a ver si así ya queda decente. También mirar el tema de los bordes. Se ve un hueco en blanco al lado del borde al mover la pantalla como para hacer zoom.
Miraré todo lo que habeis comentado al máximo detalle cuando empiece a aplicar CSS. E estado viendo varios atributos que más o menos me lo dejan mejor, pero tuve algunos problemas con algunos, asique las quité todas e iré probándolas con el SVG una a una.
Muchas gracias por todo el curro!!! ♡♡♡
En línea
Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖
Yo me pierdo, ¿Dices que tienes dos modos de hacer Zoom en tu navegador? Al menos mi Google Chrome en mi móvil Android no me deja hacer zoom para nada con el meta tag.
- El Chrome de android tiene en configuración > accesibilidad > Forzar zoom, para ignorar la etiqueta user-scalable=no
- Y si tengo 2 zoom XD, pero no en android, sino en una tablet con Windows 10 (Lenovo Yoga Book: https://www.youtube.com/watch?v=5Yhg3DgOMMU) en mi caso, pero debe ser igual con cualquier LapTop, NoteBook, Tablet PC con pantalla táctil, como se puede ver a continuación, el zoom que se hace con los dedos (pinch):
-- Se puede apreciar que el Zoom se hace sobre el WebView como si se tratara de la Lupa de Windows, pero que actúa solo sobre el WebView del Navegador, nótese que el navegador tal cual no detecta ningún cambio en su nivel de zoom.
- Por otro lado, el zoom genérico del navegador (Ctrl + +/- ó Pinch en el panel táctil (no confundir con pantalla táctil)) si que es detectado y muestra la leyenda 100% 125% 150% 200% cuando se varía el zoom:
- Pues ya está, los navegadores web móviles tienen el zoom sobre el WebView por medio de tu pantalla táctil, pero un navegador de escritorio puede tener además de este, el zoom clásico sobre el ViewPort (variando los ppp)
El Chrome de mi Android hace lo mismo con esa opción. Es el mismo zoom. Mira, está es la pantalla de mi android del HTML que pusiste con la escala inicial.
Y cuando hago zoom, con cualquiera de los métodos que has puesto:
- Ese es el zoom sobre el WebView, te fijas que el <p> aunque es una etiqueta de bloque y ocupa el 100% de su contenedor (en este caso el <body>) se desborda, cosa que no ocurre con un zoom convencional en PC (Ctrl + +/-) donde nunca se desborda, el móvil no soporta este método de Zoom, he conectado un teclado a mi Android y Ctrl + +/- no funciona en embargo se puede configurar en Configuración > Accesibilidad > Ajuste de texto y cambiar el clásico zoom, ahí el texto se amplía pero nunca es lo mismo que un zoom en PC que cambia el PixelRatio.
- Digamos que Chrome de escritorio tiene tres formas de zoom:
1. Ctrl + +/- (cambia el PixelRatio (ver en la consola como varía: devicePixelRatio)) 2. Pinch (cambia el tamaño del WebView, zoom estilo Lupa de Windows sobre el WebView) 3. Tamaño de la fuente (chrome://settings/?search=tama%C3%B1o+de+la+fuente) lo mismo que en Accesibilidad > Ajuste de texto del Android
Autor
En línea
