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:
height: 500px; height: 50%; Questi valori sono ampiamente supportati e produrranno i migliori risultati.