CSS: ¿Son ampliamente compatibles las unidades de altura de vista (vh) y ancho de vista (vw)?

Estoy usando 100vh para centrar un div verticalmente con altura de línea. Este sitio pone soporte para vh y vw en alrededor del 70%, ¿es eso una evaluación justa? ¿Recomendaría usar unidades de ventana gráfica al construir un sitio? Sé que esto es un poco subjetivo, solo estoy buscando opiniones de desarrolladores web más experimentados que yo.

EDITAR: Gracias por la entrada de todos, quiero que se vea bien en el móvil, así que supongo que tendré que renunciar a vh.

La estadística es clara y es una evaluación justa, desde mi punto de vista.

Creo que la decisión debe ser tomada por usted. Si desea proteger su sitio web a futuro con la última tecnología de punta, pero es consciente de que actualmente hay algunas caídas, entonces vaya a por todas.

Si no estás preparado para invertir un poco más en tu presencia en línea, entonces sigue el camino anterior, lo cual no está mal.

EDITAR: Cuando quiero crear un diseño receptivo, comienzo a desarrollar dispositivos móviles primero y luego a crear la versión de escritorio para garantizar que todas mis vistas funcionan correctamente, ya que en algunos puntos falta la compatibilidad con dispositivos móviles (especialmente vmax). PERO sobre esto podrías preguntarle a 50 tipos y las posibilidades de que todos digan algo más son bastante buenas.

use CSS vh y jQuery, es más seguro.
Ejemplo de jQuery:

var clientHeight = $( window ).height(); $('.element').css('height', clientHeight); 

y CSS:

 .element {height: 100vh;} 

Las unidades de visualización son geniales, pero la mayoría de los proveedores de navegadores móviles lograron que vh no se pueda usar en la práctica.

Cuando empiece a desplazarse o cambie la dirección de desplazamiento, la barra de dirección desaparecerá o regresará; luego deténgase, suelte el dedo y el valor de vh se actualizará repentinamente junto con cualquier elemento que lo use, dando como resultado una pesadilla UX (el usuario no espera que cambie nada al final del desplazamiento, cambie las proporciones de los elementos existentes, vuelva a diseñar el contenido, etc.)

Bueno, puede ver que ya está disponible para navegadores de escritorio, y la asistencia en dispositivos móviles es bastante limitada. Entonces, realmente depende de si desea crear un sitio que se vea bien en las computadoras, o un sitio basado en píxeles más compatible que también funcione en los teléfonos.

La página a la que se ha vinculado responde realmente su pregunta .

Depende de qué navegadores necesites apoyar.

El soporte parcial en IE9 se refiere a soportar “vm” en lugar de “vmin”. El soporte parcial en iOS7 se debe al comportamiento defectuoso de la unidad vh. El rest del soporte parcial se refiere a no soportar la unidad “vmax”.

Esto indica que el uso de unidades de visualización podría ser ‘defectuoso’ en iOS7. No recomendaría el uso de unidades de ventana gráfica, sino que usaré:

  • Pixles: por ejemplo, height: 500px; 500 px height: 500px;
  • Porcentaje: p. Ej. height: 50%;

Estos valores son ampliamente compatibles y producirán los mejores resultados.