CSS: le unità altezza vista (vh) e larghezza vista (vw) sono ampiamente supportate?

Sto usando 100vh per centrare un div verticalmente con l’altezza della linea. Questo sito mette il supporto per vh e vw a circa il 70%, è una valutazione corretta? Consiglieresti di usare le unità viewport quando costruisci un sito? So che questo è un po ‘soggettivo, sto solo cercando opinioni da sviluppatori web più esperti di me.

EDIT: Grazie per l’input di tutti, voglio che abbia un bell’aspetto sui dispositivi mobili, quindi suppongo che dovrò rinunciare alla vh.

La statistica è chiara ed è una valutazione equa, dal mio punto di vista.

Penso che la decisione debba essere presa da te. Se vuoi rendere il tuo sito web a prova di futuro usando l’ultima tecnologia più avanzata, ma sei consapevole che al momento ci sono alcune cadute, allora è grandioso.

Se non sei disposto a investire un po ‘di più nella tua presenza online, segui la vecchia strada, che non significa assolutamente nulla.

EDIT: Quando voglio creare un design reattivo, inizio a sviluppare per dispositivi mobili e poi a creare la versione desktop, per garantire che tutte le windows funzionino correttamente, poiché in alcuni punti manca il supporto mobile (in particolare vmax). Ma su questo si potrebbe chiedere a 50 ragazzi e le possibilità che tutti loro diranno qualcos’altro sono abbastanza buoni.

usa sia CSS vh che jQuery, è più sicuro.
Esempio di jQuery:

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

e CSS:

 .element {height: 100vh;} 

Le unità Viewport sono grandi ma la maggior parte dei venditori di browser mobili è riuscita a rendere inutilizzabile la vh in pratica.

Quando inizi a scorrere o cambia direzione di scorrimento, la barra degli indirizzi scomparirà o tornerà; poi ti fermi, rilascia il tuo dito e il valore vh verrà improvvisamente aggiornato a fianco di qualsiasi elemento che lo usa risultando in un incubo UX (l’utente non si aspetta niente da ridimensionare alla fine dello scrolling, modifica delle proporzioni degli elementi esistenti, ri-layout dei contenuti, eccetera).

Bene, puoi vedere che è già lì per i browser desktop e il supporto sui dispositivi mobili è piuttosto limitato. Quindi in realtà dipende se vuoi creare un sito che abbia un bell’aspetto sui computer o un sito basato su pixel più compatibile che funzioni anche sui telefoni.

La pagina che hai collegato risponde davvero alla tua domanda .

Dipende dai browser che devi supportare.

Il supporto parziale in IE9 si riferisce al supporto di “vm” anziché di “vmin”. Il supporto parziale in iOS7 è dovuto al comportamento bacato dell’unità vh. Tutti gli altri supporti parziali si riferiscono a non supportare l’unità “vmax”.

Questo afferma che l’utilizzo di unità viewport potrebbe essere “buggato” in iOS7. Non raccomanderei l’uso di unità viewport, ma invece di usare:

  • Pixles: ad es. height: 500px;
  • Percentuale: ad es. height: 50%;

Questi valori sono ampiamente supportati e produrranno i migliori risultati.