di Apple nuovi Macbook Pro ha uno schermo da 15" con una risoluzione di 2880x1800. Allo stato attuale è il ridimensionamento siti web con conseguente immagini pixel-raddoppiato e un layout che appare doppio scalato troppo.sito Conversione per gli schermi Retina risoluzione
As uno sviluppatore web come posso fare sulla conversione di mio/XHTML sito web esistente PHP/CSS per approfittare di schermi ad alta densità di DPI
La seguente pagina offre una prova generale decente:?
http://www.webmonkey.com/2012/06/make-sure-your-site-looks-good-on-the-new-retina-macbook-pro/
font Icona forniscono una soluzione, e le tipologie @media consentono stili aggiuntivi da utilizzare:
Esempio:
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.logo {
background: url(/path/to/my/highreslogo.png) no-repeat;
background-size: 100px 100px;
/* rest of your styles... */
}
}
Ho appena realizzato un sito retina friendly, ho usato la query media sopra (simile) e ha funzionato come un sogno – DBUK
Forse la soluzione per una retina di iPhone/iPad dovrebbe funzionare su una retina Mac. Indicare un'immagine a risoluzione più elevata come ad esempio:
background-image: url([email protected]);
Stackexchange non è un sito progettato per indovinare alle risposte –
@ChrisBeach Chiedi a una questio n, e poi abbattere una possibile soluzione perché perché dico "forse"? – Connor
@NoahWitherspoon Perché non dovrebbe funzionare? La risposta di DBUK sta essenzialmente suggerendo la stessa soluzione, ma la mia risposta diventa -2 ... – Connor
Questo script potrebbe aiutare - http://retinajs.com/. Aggiungi @ 2x ai nomi delle immagini ritagliati per il display retina e lo script fa il resto. Una trappola quando si tagliano le immagini è che tutto deve essere divisibile per due - che già conosci, ma questo mi ha fatto inciampare perché ho fatto i miei pulsanti perfettamente ma ho ignorato l'ombra/linea 1px intorno a loro, doh! :(
Edit: appena sono imbattuto in un articolo veramente bello/tutorial sul tema:.
http://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/
Si potrebbe finire per fare le cose così piccole che le persone senza una visione perfetta possono avere difficoltà –
Il mio obiettivo isn Per rendere le cose più piccole, voglio raddoppiare la loro risoluzione preservando le dimensioni fisiche Come Apple ha fatto sul loro sito Web quando sono state visualizzate alla risoluzione Retina –