Web Development Blog

24K Design Studio :: Blog :: Create website for new iPad's retina display
Author:
Password:
Create website for new iPad's retina display
11:22, 24 Mar, 2012
by James

Images on most websites looks blur on iphone 4s and the new iPad. This is beacuse the high DPI of retina screen requires a much higher resolution image to be displayed.

 

The basic idea is to determine which display is the device using, and to load a set of higher resolution of pictures if the device is using retina display.

 

<link rel="stylesheet" type="text/css" href="css/normal.css" />

<link rel="stylesheet" type="text/css" href="css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)"/>

 

At normal.css , for the same class/id of background image, specify a lower resolution image.

#sample {background-image: url(../images/lowres.png);}

 

At retina.css, for the same class/id of background image, specify a higher resolution image. It will override the css in the normal.css.

#sample {background-image: url(../images/hgihres.png);}

Reply:
Your name:
Only visible to the author.

Tell us you are not a robot. What is captcha1captchaOcaptcha2 =

Reply
#1
Jason Morgan
16:45, 12 May, 2012
 
I really believe you will do much better in the future I appreciate everything you have added to my knowledge base. Admiring the time and effort you put into your blog and detailed information you offer! <a href="http://onesourcerestoration.com/services/contractor-services">for the terms</a>
Reply
Your name:
Only visible to the author.

Tell us you are not a robot. What is captcha1captchaOcaptcha2 =

Reply
#1
arsxyajd
05:03, 25 Nov, 2015
 
1
Reply
Your name:
Only visible to the author.

Tell us you are not a robot. What is captcha1captchaOcaptcha2 =

Reply
#2
kqvexuof
05:03, 25 Nov, 2015
 
1
Reply
Your name:
Only visible to the author.

Tell us you are not a robot. What is captcha1captchaOcaptcha2 =

Reply
View the latest 5 entries.