Ente accreditato Regione Veneto n.4271

Anteprima responsive con ispeziona elemento di Chrome

Come simulare i maggiori dispositivi direttamente sul browser in fase di sviluppo

Pubblicato da Simone Baldassin // 6 giugno 2017 // 691 visualizzazioni

Ispeziona elemento

Il web è mobile, questa cosa è ormai definita, d’obbligo quindi creare siti web responsive ovvero quei siti che si adattano a tutti i dispositivi/risoluzioni. A prescindere da Google e le sue dichiarazioni in merito la cosa deve essere chiara ai più: creare un sito con la sola visualizzazione desktop non è più un opzione da diversi anni.

Senza entrare nel merito di come si crea un sito responsive soffermiamoci invece sulla problematica più ovvia ovvero come fare a verificare e simulare in corso di sviluppo se il nostro sito si adatta correttamente a tutte le specifiche di telefonini e tablet tenendo anche conto, ovviamente, che questi hanno una visualizzazione portrait e landscape.

Oltre a vari simulatori online, come ad esempio responsinator.com , ad aiutare noi sviluppatori in tal senso ci ha pensato proprio Google che ha potenziato il suo ispeziona elemento con delle utilissime funzionalità permettendoci di valutare, in tempo reale e con una discreto riscontro di veridicità sui dispositivi, la maggior parte dei device attivi in commercio.

Vediamo come, direttamente qui sul sito di Veneto Formazione (che naturalmente dobbiamo aprire con Chrome). Clicchiamo tasto destro —> Ispeziona in un punto qualsiasi dello schermo e si aprirà il nostro strumento.

Ispeziona

Clicchiamo ora in alto a destra nelle iconcine della Toggle device toolbar e avremo a disposizione un simulatore di tutto rispetto.

Ispeziona

Vediamo infatti come il simulatore ci metta a disposizione le risoluzioni dei maggiori dispositivi sul mercato

Ispeziona

e come ci permetta di verificarli sia in portrait che landscape

Ispeziona

Per esperienza personale e professionale mi sento di darvi subito 2 consigli:

  1. Verificate sempre iPhone 5, la sua larghezza a 320px necessità il più delle volte di un breakpoint ad hoc per poter gestire titoli, breadcrumbs o menù ad apertura laterale che il più delle volte non si adeguano correttamente nella gestione dai 768px canonici in giù.
  2. Come abbiamo già detto in un precedente articolo nella realtà dei fatti iOS crea qualche problema che il tool non riscontra come la gestione dei submit, le ombre nei form o il background-attachment: fixed per i quali è necessario inserire delle apposite righe di css

Ma a parte queste piccolezze, che un professionista deve comunque assolutamente sapere, lo strumento è davvero utilissimo e permette di sviluppare con un fantastico riscontro immediato risparmiando tempo e facilitando le procedure (del resto non è che possiamo comprarci tutti i tablet e tutti gli smartphone per fare test).

A dimostrazione che il tool è perennemente in sviluppo nei mesi scorsi è apparsa la voce relativa agli iPad Pro che, con i loro display retina da mille mila miliardi di pixel, necessitano sicuramente di una verifica.

Ispeziona

Nei prossimi articoli relativi al mondo del Web Design parleremo di altri strumenti utili per lo sviluppatore, stay tuned.

Topic: , , ,

Send this to a friend