Optimize webpage images for Retina display on iPhone 4

Speaking of the innovations brought about by the iPhone 4, retina display is definitely the most eye-catching one, so that when I watch the computer's display screen, I can see the pixels on the screen.

Depending on this Retina display, the iPhone 4 resolution reaches 640x960 pixels; however, to maintain downward compatibility, it still uses 320x480 points.

That is to say, when a common image is displayed without scaling, it uses four pixels to display one pixel in the image. When a retina image is displayed, each pixel corresponds to one pixel in the image.

In this way, the old application can run on the iPhone 4 without modification-although the display effect is poor, there will not be content in the upper-left corner of the 1/4 area.

When developing iOS applications using iOS SDK, you only need to add the image name with the suffix "@ 2x" to enable devices that support retina display to automatically display images with a higher resolution.

However, apps using UIWebView such as Safari cannot use this feature when displaying images, because this may cause a large number of unnecessary HTTP requests.

Since it cannot be implemented automatically, it can only be done manually. The principle is very simple. Prepare two types of images. When we find that retina display is supported, we will display a large image, and then reduce the length and width of the image by half.

On the webpage, the ratio of pixel to point is called device-pixel-ratio. Common devices are 1, iPhone 4 is 2, and some Android models are 1.5.

To detect it, use CSS3 media query:

 
 

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

Or:

 
 

  
  
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {} 
 
 

The disadvantage of this method is that the image must be set as a background image, or two img elements are listed at the same time, but one of them is hidden. I will not list the detailed code.

The more flexible method is of course JavaScript. You just need to simply get window. devicePixelRatio. For the old browser, It is undefined and can be regarded as 1.

Take this globe as an example:

Its length and width are 64 pixels, so I should get a 128 pixel, and then reduce it by half:

 
 

  
  
If (window. devicePixelRatio = 2 ){
  
  
Var photo = document. getElementById ('photo ');
  
  
Photo. src = 'HTTP: // www.bkjia.com/uploads/allianz 131226/1a50051c-2.png ';
  
  
Photophoto. width = photo. height = 64; // No width or height is specified for this image. Therefore, you can modify one of them.
  
  
}
 
 

The disadvantage of this method is that it may waste traffic, because before JavaScript execution, it is getting low-resolution images.

The final effect is as follows:

Although there is no difference on the computer, it is easy to see the difference between iPhone 4 and iPhone 4 When browsing or enlarging the mobile phone page.