Colori errati su mobile

di il
10 risposte

Colori errati su mobile

Buongiorno a tutti.
Ho scrirro una applicazione in HTML e PHP.
Funziona tutto finché la utilizzo su PC.
Se la apro su mobile ho comportamenti diversi sui colori
Nell'allegato a sinistra c'è lo screenshot preso da un motorola, a destra da un samsung.
Perché il samsung non decodifica i colori?

Nella seconda immagine c'è il codice per scrivere i quadratino
$whdcol è il colore
$simb è il quadratino.

Qualcuno può aiutarmi?
Grazie
MarcoM
Allegati:
18961_5d592e4ceb3cfdbcdfb420084c1b952e.jpg
18961_5d592e4ceb3cfdbcdfb420084c1b952e.jpg

18961_219842beadabb30efa5e86543d2f4b16.jpg
18961_219842beadabb30efa5e86543d2f4b16.jpg

10 Risposte

  • Re: Colori errati su mobile

    marcom149 ha scritto:


    Se la apro su mobile ho comportamenti diversi sui colori
    Qual è il codice HTML risultante che viene scaricato dal browser?

    marcom149 ha scritto:


    Nell'allegato a sinistra c'è lo screenshot preso da un motorola, a destra da un samsung.
    Perché il samsung non decodifica i colori?
    Stai citando dei marchi, ma forse per completezza è meglio definire accuratamente di quali modelli stiamo parlando.

    Hai provato inoltre a svuotare la cache?
  • Re: Colori errati su mobile

    Ciao Alka, grazie della risposta.
    Non facevo un problema di marchi, era solo per dire che erano telefoni diversi.
    Allego un pezzo di codice HTML dal mio Samsung Note 8 che non decodifica i colori.
    All'interno vedo i colori corretti, quindi non capisco...

    <form action="#" padding="0">
    <input id="menu" type="submit" name="" value="Logistica" >
    <a style="font-size: 30px; color: #AF7817" > &FilledSmallSquare;&nbsp;&nbsp; </a>
    <input type="hidden" name="lingua" value="1" />
    <input type="hidden" name="amb" value="2" />
    <input type="hidden" name="int" value="spe" />
    </form>
  • Re: Colori errati su mobile

    I'll concetto fondamentale da tenere presente e' che OGNI BROWSER FUNZIONA PER CONTO SUO.
    I'll comportamento cambia in base al SO, marca (chrome, firefox,...), versione, ...

    per ovviare a tali 'rogne', ci sono librerie 'dedicate' che tentano di uniformare, per quanto possibile, gli 'strani comportamenti'.

    Ti conviene appoggiarti a queste librerie
  • Re: Colori errati su mobile

    Grazie.
    Sai indicarmi il nome di una di queste librerie?
  • Re: Colori errati su mobile

    marcom149 ha scritto:


    Allego un pezzo di codice HTML dal mio Samsung Note 8 che non decodifica i colori.
    All'interno vedo i colori corretti, quindi non capisco...

    <form action="#" padding="0">
    <input id="menu" type="submit" name="" value="Logistica" >
    <a style="font-size: 30px; color: #AF7817" > &FilledSmallSquare;&nbsp;&nbsp; </a>
    <input type="hidden" name="lingua" value="1" />
    <input type="hidden" name="amb" value="2" />
    <input type="hidden" name="int" value="spe" />
    </form>
    Credo che il problema derivi dal fatto che il riquadro visualizzato sia ottenuto mostrando un carattere speciale: in base al font utilizzato, questo potrebbe essere mostrato in modo diverso.

    Ad esempio, alcuni font che includono delle emoji le possono mostrare monocromatiche oppure colorate, ma ciò dipende dalle caratteristiche del font stesso.

    Il mio suggerimento è quello di usare un elemento diverso per il colore, magari un riquadro reale (ad esempio, usando un elemento <div> a cui attribuisci da foglio di stile precise dimensioni) e quindi impostando il colore da mostrare come sfondo (background-color).

    Per accertare se è un problema di carattere, tenta l'uso di un simbolo diverso, magari una lettera tradizionale (es. "A") al posto del riquadro, e vedi se il colore in quel caso viene applicato correttamente; se noti differenze, allora adotta la soluzione indicata sopra per garantirti uniformità su qualunque browser e dispositivo, oppure forza l'uso di un Font (magari un Web Font) che supporti lo stile desiderato per quel carattere.

    Ciao!
  • Re: Colori errati su mobile

    marcom149 ha scritto:


    Sai indicarmi il nome di una di queste librerie?
    Nel tuo caso, dubito che questo dipenda dalla compatibilità crossbrowser, quanto più da un default differente nell'uso di determinati caratteri e/o codepage nel sistema operativo di riferimento.

    Se non specifichi un font e lasci la scelta all'utente e/o al sistema, potrebbe non supportare le caratteristiche che ti occorrono nel "rendering colorato" del riquadro.

    Questo accadrebbe a prescindere, in modo ininfluente da librerie e layer aggiuntivi che aggiungi alla pagina.

    Ciao!
  • Re: Colori errati su mobile

    Il simbolo è un carattere unicode, precisamente &FilledSmallSquare, non saprei che font indicare.
    E comunque il quadratino lo riconosce, è il colore che manca.
  • Re: Colori errati su mobile

    marcom149 ha scritto:


    E comunque il quadratino lo riconosce, è il colore che manca.
    Direi che non hai letto nulla del post che ho scritto.
  • Re: Colori errati su mobile

    L'ho letto, e ho letto anche quello in cui dicevi di mettere font.
    Comunque credo di aver risolto.
    Non posso usare DIV, perché mi va a capo e dovrei ritrutturare parecchio per mettere il quadratino nella stessa riga.
    Ho lasciato il tag A ma ho messo backgroung-color al posto di color e sostiruito il simbolo con &nbsp;
    Mi sembra che vada. Proverò altri cellulari.
    Grazie per i consigli
  • Re: Colori errati su mobile

    marcom149 ha scritto:


    L'ho letto, e ho letto anche quello in cui dicevi di mettere font.
    In primo luogo, quello che segnalavo è che potrebbe essere un limite del font stesso (anche se è più probabile che sia un bug del browser, a questo punto): se non si vuole cambiare font, allora si deve cambiare il carattere scelto, oppure l'approccio (cioè usare qualcos'altro al posto del testo).

    marcom149 ha scritto:


    Comunque credo di aver risolto.
    Questo è l'importante.

    marcom149 ha scritto:


    Non posso usare DIV, perché mi va a capo e dovrei ritrutturare parecchio per mettere il quadratino nella stessa riga.
    Puoi usarlo benissimo, basta impostare gli stili CSS appropriati, usando ad esempio un float oppure la proprietà display (es. inline).

    marcom149 ha scritto:


    Ho lasciato il tag A ma ho messo backgroung-color al posto di color e sostiruito il simbolo con &nbsp;
    Va bene come palliativo, ma io non mi fiderei mai: usare un carattere quindi rinunciare al controllo delle dimensioni in pixel (o in qualsiasi altra unità di misura) affidandosi a un elemento grafico che dipende dal font predefinito (che non viene impostato) variabile da browser a browser, da device a device, è molto rischioso, quindi rischi di passare da un problema ad un altro.

    marcom149 ha scritto:


    Mi sembra che vada. Proverò altri cellulari.
    Quindi il problema non era nel colore in sé, ma appunto nel rendering del font.
    Io ripenserei la soluzione di usare caratteri, magari sfruttando il fatto che HTML5 supporta anche SVG, quindi inserire forme geometriche (cerchi, quadrati, rettangoli, ecc.) è una operazione più che immediata e sicura, e che non richiede particolari sforzi.

    Ciao!
Devi accedere o registrarti per scrivere nel forum
10 risposte