Come testare un sito Web per Retina su Windows senza un display Retina effettivo?

C'è un modo per simulare un display Retina su Windows per testare un sito Web per display HiDPI come Retina?

Uso Windows su un monitor standard da 24 "1920x1080. La scorsa notte ho controllato il mio sito Web su un nuovissimo MacBook Pro Retina da 15" di un amico e la grafica sembrava tutta sfocata (di gran lunga peggiore rispetto a un normale MacBook da 15 pollici), mentre il carattere era super nitido e nitido, facendo apparire il logo ancora peggiore a causa del confronto diretto.

Ho seguito questo tutorial per preparare il mio sito web Retina:

http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

Ho utilizzato l'approccio retina.js poiché non ho immagini di sfondo.

C'è un modo per testare se funziona davvero? Ovviamente potrei chiedere al mio amico di usare il suo Retina Notebook, ma per me non è un flusso di lavoro fattibile. Voglio essere in grado di testare almeno approssimativamente i siti Web per la compatibilità con Retina nel mio ambiente.

about: config hack su Firefox

Puoi effettivamente usare Firefox:

1. Vai a "about: config"
2. Trova "layout.css.devPixelsPerPx
3. Modificalo nel rapporto desiderato (1 per normale, 2 per retina, ecc. -1 sembra essere predefinito.)

Immagine dello schermo:

Aggiorna la tua pagina - boom, la tua media query è ora scattata! Tanto di cappello a Firefox per essere fantastico per lo sviluppo web! Attenzione, non solo il sito Web sarà ora aumentato del doppio, ma anche l'interfaccia utente di Firefox sarà raddoppiata. Questo raddoppio o zoom è necessario, poiché è l'unico modo in cui sarai in grado di esaminare tutti i pixel su uno schermo con rapporto pixel standard.

Funziona bene su Windows 7 con Firefox 21.0 e anche su Mac OS X con Firefox 27.0.1.

Se non stai usando media query e altre logiche più avanzate (cioè stai fornendo a tutti le immagini HiDPI), puoi semplicemente ingrandire con il tuo browser al 200%. L'emulazione di Chrome è uno strumento utile e aiuta nelle query multimediali, ma poiché impedisce lo zoom, non è possibile esaminare la qualità dell'immagine.

Zoom su Firefox e Edge

Attualmente su Firefox ed Edge, se esegui lo zoom, si attivano query multimediali basate su dppx. Quindi questo approccio più semplice potrebbe essere sufficiente, ma tieni presente che la funzionalità è segnalata come un bug "non risolvibile" per Firefox, quindi potrebbe cambiare.

Nella versione di Google Chrome "33.0.1720.0 Canary", ora puoi emulare dispositivi come iPhone5 e altri con una grande serie di parametri come "Rapporto pixel dispositivo", "metriche carattere Android" ed "Emulazione Viewport" .

Non c'è più bisogno di quell'hacking di Firefox - è difficile lavorarci comunque.

Grazie al team di sviluppo di Google! ! :)

In Chrome puoi farlo:

1) Apri gli Strumenti per sviluppatori di Chrome e fai clic sulla piccola icona "ingranaggio".

2) Quindi scegli "Mostra la visualizzazione" Emulazione "nel cassetto della console".

3) Infine, apri il "cassetto della console" in Strumenti per sviluppatori e scegli Emulazione . Imposta lo schermo di emulazione e imposta il rapporto pixel del dispositivo su 2,5.

Per quanto ne so, non è possibile altro che acquistare un dispositivo retina.

Alcune soluzioni alternative

• Suggerito qui:

  • Se raddoppi le dimensioni dell'immagine e le proporzioni rimangono le stesse, sei praticamente al sicuro. Se non hai un display retina con cui testare, passa dalla media query del rapporto pixel a qualcosa di basato sulla larghezza.

  • Test e risoluzione dei problemi di contenuto ad alta risoluzione
    http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html

• Come sviluppare per HiDPI ("Retina") senza un MacBook Pro Retina
  http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/

• Immagini Retina di WordPress
  http://wpmu.org/wordpress-retina/

Meno rilevante

• Come creare un sito Web reattivo e pronto per la retina

• Come progettare per i display Retina di Apple
  http://www.studiopress.com/design/retina-display-design.htm

• Creazione di siti web per display Retina: fare amicizia con i pixel
  http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels

• Come sviluppare un sito web per la visualizzazione della retina?

• come prepararsi alla retina?

Metodo attuale per l'emulazione di un display Retina (HiDPI) con Google Chrome

1) " Fare clic con il pulsante destro del mouse " sulla pagina Web, quindi selezionare " Ispeziona " per aprire gli strumenti per sviluppatori di Chrome

2) Fare clic sull'icona " Attiva / disattiva modalità dispositivo "

3) Nella casella a discesa Dispositivo nella parte superiore dello schermo, seleziona " Laptop con schermo HiDPI "

4) Ora puoi vedere come apparirà il sito web su uno schermo Retina aka HiDPI

Uso una libreria di ridimensionamento delle immagini per creare immagini dinamicamente. Per la versione 2x aggiungo una filigrana dinamica durante il debug: questo rende molto facile vedere se l'immagine ad alta risoluzione viene effettivamente mostrata o meno. L'ho trovato molto utile.

Il modo in cui funziona varierà, quindi non includendo il codice di esempio.

Google Chrome versione 80

1. Apri gli strumenti per sviluppatori ctrl-shift j
2. Attiva o disattiva la barra degli strumenti del dispositivo facendo clic sull'icona del tablet / telefono in alto a sinistra (diventerà blu se fai clic su di essa)

3. Ora il viewport dovrebbe avere una barra degli strumenti sopra di esso. Fare clic sull'icona delle opzioni (3 punti) in alto a destra e selezionare l' opzione Aggiungi rapporto pixel dispositivo .

4. Ora dovresti vedere l'opzione sulla barra degli strumenti. Da qui puoi passare a 1x, 2x o 3x.

5. Quando esegui il test, assicurati di premere il pulsante di aggiornamento ogni volta che modifichi il rapporto pixel. Se imposti il ​​rapporto su 2x e poi lo reimposti su un valore inferiore, non vedrai alcuna modifica perché il browser non recupererà gli asset 1x se ha già recuperato 2x o superiore.

Non so se è troppo semplice, premo ctrl e scorro e si attiva la media query. L'ho controllato in bugzilla e funziona. Non sono sicuro del ridimensionamento svg in quanto appare sfocato, ma è l'immagine svg.

Se hai un mac (o una macchina virtuale mac osx) puoi usare l'emulatore ios con xcode. fa saltare in aria la finestra due volte più grande, quindi non è come appare nella vita reale, ma ti mostrerà chiaramente se le tue immagini sono sfocate o meno.