Iniziamo con il precisare le dimensioni delle Viewport che sono la regola base per un buona resa:

  • Desktop — 1600 x 992px scaled down to scale(0.3181)
  • Laptop — 1280 x 802px scaled down to scale(0.277)
  • Tablet — 768 x 1024px scaled down to scale(0.219)
  • Mobile — 320 x 480px scaled down to scale(0.219)

Vi segnalo di seguito diversi tools online utili per il debug dei siti responsive. La modalità di caricamento per le piattaforme di seguito elencate non prevede test su ambienti locali, mi raccomando quindi di pubblicare i siti in ambiente di stage o nel caso usare le url di produzione.

Conclusioni

Ogni strumento è differente dagli altri, abbiamo quindi diverse soluzioni che possono adattarsi alle nostre esigenze di sviluppatori e soprattuto da affiancare al resize manuale della finestra del browser.

Nicola Toralbo
Digital Dew è un blog di Nicola Toralbo. I suoi post esplorano la progettazione e lo sviluppo del web moderno attraverso foto e citazioni di architetti, ingegneri e creativi influenti.