Apple nouvelles Macbook Pro a un écran 15" avec une résolution de 2880x1800. À l'heure actuelle, il est mise à l'échelle des sites Web qui donne des images de pixels doublé et une mise en page qui apparaît à double mis à l'échelle aussi.Conversion site pour les écrans Retina résolution
Comme un développeur web comment puis-je faire pour convertir mon PHP existant/XHTML/site CSS pour tirer parti des écrans haut DPI
La page suivante propose une exécution par décente:
http://www.webmonkey.com/2012/06/make-sure-your-site-looks-good-on-the-new-retina-macbook-pro/
polices Icône fournissent une solution, et les types de @media permettent des styles supplémentaires à utiliser:
Exemple:
@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... */
}
}
Juste fait un site rétine conviviale, utilisé la requête de médias ci-dessus (similaire) et cela a fonctionné comme un rêve – DBUK
Peut-être la solution pour une rétine iPhone/iPad travaillerait sur une rétine Mac. Indiquez une image de résolution supérieure tels que:
background-image: url([email protected]);
Stackexchange n'est pas un site conçu pour deviner les réponses –
@ChrisBeach Vous posez une question n, puis abattre une solution possible parce que je dis "peut-être"? – Connor
@NoahWitherspoon Pourquoi ça ne marcherait pas? La réponse de DBUK suggère essentiellement la même solution, mais ma réponse obtient -2 ... – Connor
Ce script pourrait aider - http://retinajs.com/. Vous ajoutez @ 2x à vos noms d'image coupés pour l'affichage de la rétine et le script fait le reste. Un piège quand on coupe les images est que tout doit être divisible par deux - ce que vous savez déjà, mais cela m'a fait trébucher car j'ai fait mes boutons parfaitement mais j'ai ignoré l'ombre/ligne 1px autour d'eux, doh! :(
Edit: Juste est tombé sur un très joli article/tutoriel sur le sujet.
http://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/
Vous pourriez finir par faire des choses si petites que les gens sans vision parfaite peuvent avoir des difficultés –
Mon but ISN Je veux doubler leur résolution tout en préservant la taille physique.Comme Apple l'a fait sur leur site Web lorsqu'il est visualisé à la résolution Retina –