Suitable formulations for the iOS retina (retina) screen

This article link:http://www.penddy.com/mobile-client-knowledge-processing-1-ios-retinal-adaptation-of-the-retina-screen.html

The retina screen is well supported in the product.

I. Devices that support the retina (retina) screen

326ppi

326ppi

TD width= "107" > TD width= "107" >

device	resolution	screen size	aspect ratio	resolution
iPod Touch 4	640x960	3.5 "
iPhone 4	640x960	3.5 "	3:2
iPhone 4S	640x960	3.5 "	3:2
The New IPad	2048x960	9.7 "	4:3	264ppi

second, the previous equipment

device	resolution	screen size	aspect ratio	resolution
iPod Touch 1/2/3	320x480	3.5 "
iPhone , iphone 3G, iphone 3GS	320x480	3.5 "
IPad 1/2	1024x768	9.7 "	4:3	132ppi

Three, the way to fit

From the device parameters above, the iOS Retina screen device, on the same size, supports the width and height of the resolution increased by one times, the resolution (pixels per inch) increased by one times.

That is displayed in the same size of space, the need for the size of the picture material needs to be increased by one times, specific to the practice of two points:

3.1. Support for picture footage in native controls

√ You need to provide an extra width and height picture material on a non-retina screen.

√ naming requires you to follow the following naming convention: Assuming that the picture footage of the non-Retina screen is filename.png, you need to name the picture footage with a width and height of [email protected]

Note: @2x must be lowercase

For example, in this instance, the non-Retina screen calls Allnotestabitem.png, which in the retina screen calls [email protected], but because of the resolution, the physical dimensions shown are still the same size.

Type	Image	Dimensions (px)	Named
Non-retina		24x24	Allnotestabitem.png
Retina		48x48	[Email protected]

Support for picture footage in 3.2.web controls

√ Only need to increase the width and height of the picture material one more times

√ In the WebView style, specify the widht=50%, height=50% of this picture, or specify the absolute pixel value as half the actual pixel value.

For example, in this example, the picture will be displayed as half the width of the real picture, but it will not blur and have a grainy feel on the retina.

Type	Image	Dimensions (px)	Style
Retina		48x48	Or

Finish

Suitable formulations for the iOS retina (retina) screen