Come gestite lo zoom del browser del cliente?

Ho molte immagini su una pagina, una galleria. Voglio che le immagini rimangano nitide, quindi non eseguo il ridimensionamento del browser, utilizzo le dimensioni originali dell'immagine.

Tuttavia, questo funziona solo quando il livello di zoom del browser è del 100%. Quando aumento o diminuisco il livello di zoom, la qualità delle immagini diminuisce.

Alcuni client hanno effettivamente diversi livelli di zoom per impostazione predefinita. Mi chiedevo, come puoi gestirlo e lo gestiamo affatto?

Saluti

Penso che la maggior parte delle altre risposte abbia perso il punto: non si tratta di ignorare le preferenze dell'utente, si tratta di fornire le migliori immagini di qualità nello scenario comune del dispositivo di un utente assegnando più di un pixel fisico per ciascun pixel CSS noto anche come " Pixel di riferimento "nell'immagine, con il browser che ridimensiona l'immagine, rendendola pixelata e sgranata.

Le mie soluzioni suggerite di seguito, ma prima ecco i quattro modi in cui ciò può accadere:

• Più raro: l'utente sceglie di ingrandire . Non è un grosso problema, dato che è una loro scelta.
• Sorprendentemente comune: il browser dell'utente è ingrandito per impostazione predefinita . Ad esempio, molte macchine Windows ad alta densità di pixel sono ingrandite al 125% o più per impostazione predefinita e Firefox recentemente (in modo confuso!) Lo ha reso così in questi casi dice agli utenti che sono ingrandite al 100% quando sono effettivamente ingrandite al 125% , lasciandoli grattarsi la testa chiedendosi perché all'improvviso tutto sembri granuloso.
• Molto comune: la maggior parte dei dispositivi Android (e di altri dispositivi?) Ha un rapporto pixel maggiore di 1. Ciò significa che ogni "pixel CSS" viene effettivamente visualizzato utilizzando più di un pixel fisico, quindi un'immagine 200px per 200px impostata su width: 200px; height: 200px;ridimensionerà effettivamente l'immagine di 200 x 200 pixel su più di 200 x 200 pixel, rendendola potenzialmente sgranata.
• Molto comune: molti moderni dispositivi Apple hanno " display retina ". Questo è essenzialmente lo stesso di un dispositivo Android con un rapporto pixel di 2, ma con un marketing migliore e alcune proprietà personalizzate che consentono di rilevarlo per nome.

Ognuno di questi comporterà il problema di John di una galleria di immagini che sembrano sorprendentemente sgranate.

Speravo che qualcuno avrebbe avuto un'ottima soluzione a questo problema, ma per ora ecco le mie opzioni preferite, a partire dalla più efficace ma meno universalmente possibile:

1. Se possibile, vai a vector - SVG (o Raphael.js se hai ancora bisogno di supportare IE8). Realisticamente, questa è solo un'opzione per icone, diagrammi ecc. E non è mai un'opzione per le fotografie. SVG molto complesso può anche essere ingombrante su cellulari di fascia bassa a causa dell'elaborazione richiesta.
2. Se possibile, rileva il rapporto pixel del dispositivo e pubblica le immagini in base a quello. Questo può anche risolvere il problema di Firefox su Windows perché Firefox su Windows modifica la lettura dei rapporti dei pixel quando si ingrandisce e si riduce. Il rovescio della medaglia è che diventa un problema di codifica complicato che coinvolge lavori di sviluppo sul lato server e client.

3. Se 1. e 2. non sono possibili, ma è davvero importante e la qualità dell'immagine è più importante del tempo di caricamento, basta raddoppiare l'immagine.

   • Questo è ciò che fanno Google con il loro logo sulla loro home page: schiacciano un'immagine PNG da 538 x 190 pixel in un contenitore da 269 x 95 pixel. È anche più o meno lo stesso di come funzionano le immagini reattive.

   • Questa era considerata una cattiva pratica perché le vecchie versioni di IE erano terribili nel ridimensionare le immagini, ma quelle sono ora utilizzate molto raramente e molto meno comuni degli schermi ad alta densità di pixel. È ancora un po 'indesiderabile poiché aumenterà la dimensione dell'immagine e quindi aumenterà il tempo di caricamento - questo è un compromesso che devi giudicare caso per caso.

   • Raddoppiare le dimensioni è comune perché pochissimi dispositivi hanno un rapporto maggiore di 2, pochissimi utenti hanno ingrandito oltre il 200% e il ridimensionamento delle immagini del 50% è più pulito rispetto ad altre quantità.
4. Se 1, 2 non sono possibili e i tempi di caricamento sono una priorità troppo elevata per 3, non sono a conoscenza di altre opzioni e la mia raccomandazione è di non preoccuparsene, perché metà dei siti su Internet ha lo stesso problema e le persone con questo problema sul tuo sito avranno questo problema anche su altri siti. Inferno, Firefox su Windows persino pixel i suoi pulsanti dell'interfaccia utente ...

Come ha commentato DA01, non dovresti farci nulla.

Lo zoom è un'opzione specificata dall'utente e pertanto è sotto il loro controllo. Le impostazioni con cui decidono di sbagliare non dovrebbero essere sotto la tua responsabilità.

Puoi tenere conto di diversi browser e versioni e cosa no, ma ragionevolmente parlando non dovresti tenere conto dello zoom di un utente.

Sicuramente potresti rappresentare il 125% o il 150% (e potresti anche non doverlo fare). Ma 200%, 300%, di più? Non ha alcun senso.

Cosa succede se l'utente utilizza il tema Windows ad alto contrasto? E se usano costantemente la lente d'ingrandimento? Che importa?

Idealmente il tuo sito Web è abbastanza flessibile da non fare una vera differenza tra una piccola differenza di zoom, ma le immagini diminuiranno di qualità con lo zoom ma non è tua responsabilità.

Questa è ovviamente solo la mia opinione, ma l'azienda per cui lavoro dice esplicitamente ai clienti che non supportiamo le loro preferenze di zoom.

Altre persone hanno dato ottimi consigli sui problemi che dovrai affrontare e non sono abbastanza bravo in quest'area per fare un buon tutorial ma ...

Potresti voler progettare un sito reattivo che si adatta in base alla res / dispositivo dell'utente e quindi stai probabilmente cercando un codice che cambierà le immagini in file di risoluzione più alta o più bassa quando richiesto, piuttosto che allungare e comprimere le immagini che hai.

L'ultima volta che ho provato a farlo, ho usato media-query.js e picturefill.js. Vedi: http://responsivedesign.is/resources/images/picture-fill . Avevo un layout a 3 colonne in cui alcune immagini si estendevano su due colonne ... Quando la finestra del browser era abbastanza piccola, le immagini grandi passavano a una versione di risoluzione più piccola che sarebbe larga solo una colonna. Il browser dell'utente carica semplicemente la versione del file di cui aveva bisogno. (e nel mio caso, il plugin in muratura sposterebbe tutto per adattarsi).

Ovviamente il tuo utente deve avere JavaScript abilitato ...

Non puoi forzare la mano degli utenti. Le impostazioni dell'utente non sono tue con cui giocare. Impostazioni e aggirarle è una cattiva idea che potrebbe esserci un motivo per cui l'utente ha fatto qualcosa. In entrambi i casi non è possibile garantire nulla sui vari dispositivi.

In effetti se si entra nella parte tecnica diventa ancora più interessante. Dai davvero le chiavi del regno con la tua pagina web. Vedere l'utente che scarica la pagina Web e ora l'utente può fare ciò che gli piace. Non hai alcun controllo su questo livello, dopotutto è in esecuzione sul computer degli utenti e possono fare tutto ciò che vogliono. Anche stackexhange non ha lo stesso aspetto sul mio computer / cellulare come sul tuo. Modifico automaticamente alcuni aspetti della GUI, per correggere 2 bug di rendering e ho aggiunto 2 scorciatoie.

Il fastidioso comportamento di upscaling delle immagini sugli schermi HiDPI, che porta a foto sfocate (ovvero l'incubo dei fotografi), mi ha anche turbato per un bel po 'di tempo. Mi chiedevo anche che non esistesse un semplice attributo CSS che lo disabilitasse per le immagini.

La mia attuale soluzione con CSS si presenta così:

@media only screen and (min--moz-device-pixel-ratio: 1.25),
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-device-pixel-ratio: 1.25) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.5 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.75),
    (-o-min-device-pixel-ratio: 7/4),
    (-webkit-min-device-pixel-ratio: 1.75),
    (min-device-pixel-ratio: 1.75) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.75 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 2.00),
    (-o-min-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2.00),
    (min-device-pixel-ratio: 2.00) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 2.00 - var(--pic-width) + var(--pic-width));
        }
}

Il prossimo passo sarebbe usare le classi per definire e impostare diverse dimensioni dell'immagine, se necessario. Non conosco un modo per ottenere dinamicamente le dimensioni dell'immagine. La funzione CSS attr () sembra non funzionare per questo.

Quindi questa sarebbe più una domanda di programmazione. Ma usando JQuery o anche solo il css piano è possibile visualizzare immagini diverse in base alla larghezza dello schermo dell'utente, all'altezza dello schermo e così via.

Anche se probabilmente questo non è lo stackexchange da chiedere.

Puoi semplicemente farlo tramite HTML nell'intestazione del sito e aggiungere questo

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Questo non è raccomandato dagli sviluppatori per ogni tipo di sito, ma dovrebbe realizzare ciò che stai chiedendo.

Spero che sia d'aiuto: trasformazione della regola css: scala sul tag body o altro - non perfetto, vedi qui, per favore:

/programming/23099849/stop-firefox-dpi-scaling-when-windows-setting-is-at-125/42755741#42755741