how to get retina-ready? [closed]

问题

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 2 years ago.

what do I have to do to make my web apps/sites retina-ready (on iPhone4 & iPad3) when it comes to

• videos
• images
• fonts
• colors ?

I'm looking for a checklist here.

回答1:

If you're on Rails 3.1+, you can use my clear_eyes gem to automatically handle retina images.

Colors and fonts won't need any adjustments. For example, a CSS button will not require any adjustment, only images and perhaps video.

Here's a very good flowchart of the steps required to completely retina-fy your site, although I recommend using the gem for images, if you're on Rails.

回答2:

Smashing Magazine: Towards A Retina Web (mostly about graphics)

回答3:

for image:

<script>if(window.devicePixelRatio>1)document.getElementsByTagName("img")[0].src="retina.png"</script>

for backgrounds:

<style>
  @media screen and (-moz-min-device-pixel-ratio: 2),
    screen and (-o-min-device-pixel-ratio: 2/1), 
    screen and (-webkit-min-device-pixel-ratio: 2), 
    screen and (min-device-pixel-ratio: 2){

      h1{background-image:url(retina.png)}

  }
</style>

来源：https://stackoverflow.com/questions/9748252/how-to-get-retina-ready