Pagine non responsive
alterat opened this issue · comments
Riporto una issue segnalata da @pablopers.
-
Alcune volte le pagine non vengono visualizzate correttamente su mobile (vedi, per esempio: https://docs-italia-staging.teamdigitale.it/italia/docs-italia/docs-italia-guide/it/bozza/index/pubblicare-un-documento.html)
-
Le immagini vengono ridotte senza mantenere l'aspect ratio, creando una distorsione innaturale.
Rispetto al problema delle immagini è necessario omettere le opzioni :width: e :height: della direttiva figure.
Ci sono altri problemi nella visualizzazione mobile?
cc @pablopers.
Grazie Davide, le immagini hanno ripreso le loro proporzioni "naturali" rimuovendo le opzioni.
Ma sia su desktop che su mobile continuo ad avere elementi che "sforano" a destra ma potrei essere io e le mie impostazioni :-) verifico meglio e ti aggiorno.
https://testdig.readthedocs.io/it/fiximage/index/pubblicare-un-documento.html
https://github.com/pablopers/docs-italia-guide
Riguardo alle figure, però, ho un dubbio... La larghezza della figura viene decisa automaticamente in base alla larghezza dello schermo? O dipende dalle dimensioni reali della figura in px?
Cosa succede per immagini che sono molto piccole (per esempio, dei pulsanti di navigazione) o più alte che larghe (per esempio: https://guida-docs-italia.readthedocs.io/it/latest/index/che-cos-e-docs-italia.html#responsive)?
@atorin le figure sono impostate con una larghezza massima del 100%, il che significa che se la dimensione reale dell'immagine (così come contenuta nel file corrispondente) supera la larghezza del contenitore, allora la sua larghezza è limitata dalla larghezza del suo contenitore.
Nel caso di immagini con dimensione reale minore del contenitore, esse sono visualizzate alla loro larghezza reale.
L'altezza, dato che non è specificata nessuna regola di stile, è regolata in modo proporzionale alla larghezza.
In ogni caso è buona norma non usare immagini con risoluzioni eccessivamente grandi che vanno molto oltre la larghezza del contenitore visualizzato su schermi larghi. Su Docs Italia questo significa che andrebbero usate immagini con larghezza reale non superiore ai 900px, in modo da minimizzare la dimensione del file servito.
Alcuni problemi di visualizzazione su mobile (horizontal overflow) sono stati risolti via 5ed165c.
cc @pablopers
grazie Davide @pdavide !
i problemi di visualizzazione su mobile di Docs-italia-guide e anche dei miei documenti sono risolti!