Salve, in che modo stai effettuando il confronto tra pc e smartphone?
Da come hai descritto la questione mi viene da pensare che tu stia semplicemente poggiando il cellulare sullo schermo del pc e quindi vai a ridimensionare la finestra del browser (nello schermo del pc) per renderti conto che le due "risoluzioni" (in pixel) non corrispondono. Se così fosse può essere normale che ci sia una differenza anche sostanziale tra le risoluzioni dei due differenti schermi.
Facciamo però attenzione a quando parliamo di "risoluzione" in senso generico. A grandi linee si parla di "risoluzione dello schermo" per definire la dimensione in pixel (larghezza per altezza), ma ciò che fa la differenza, in questo caso, è la "risoluzione grafica", cioè la densità di pixel per ogni pollice lineare dello schermo, che viene definita in PPI (Pixel Per Inch).
Quanti più pixel ci stanno in un pollice, maggiore è la densità di pixel e migliore è la definizione dell'immagine. Perciò, a parità di risoluzione dello schermo, l'immagine risulterà più piccola in un dispositivo che ha una migliore definizione rispetto ad uno che ha una definizione più bassa.
I display dei moderni smartphone hanno generalmente delle definizioni più elevate rispetto agli schermi dei pc (non c'è comunque una regola fissa). Da questo potrebbe dipendere la differenza che riscontri.
In questo caso se ti serve impostare il CSS in base alla "definizione" dello schermo, piuttosto che alla sua "risoluzione", esistono varie media query che potrebbero aiutare.
Vedi qualche articolo:
CSS e immagini per gli schermi ad alta densità di pixel
Gestione immagini retina display nei siti web.html
CSS3 media queries for Retina & other high PPI screens
CSS: React to Display Density for Responsive Design
HD & Retina Display Media Queries
Pixel density and Resolution tool for CSS media queries
Rispondi quotando
