Compatible processing of retina new iPad and general resolution iPad pages

I finally understood what the retina is like a normal screen. That is to say, the resolution is twice the size of other screens, but the size is still the same. An image is 200*200, and the image style is set to 200*200. The image is blurred in the retina. If the image size is 400*400, it will not be blurred, but it will be in high definition. The rounded corner, gradient, and shadow depicted using css3 are the same.

I. Experience Sharing

Even if it is not fruit powder, you should know that one of the major differences between ipad2 and the new iPad is the display resolution. The new iPad display is called the retina display. Its device resolution ratio (for more information, click here) is twice that of ipad2. -IPad Mini is also a normal resolution ratio.

Ipad2 and the new iPad display a page at the same time. The width is 1024 pixels. What is the difference? -- Each pixel of the new iPad actually has four times the normal pixel, as shown below (©Smashingmagazine ):

The pixel value (PX) We set using CSS is a common pixel, or a standard pixel.

Therefore, for a 200x200 image, we set the following CSS:

img {    width: 200px;    height: 200px;}

In ipad2 or mini iPad, images are normally displayed. However, in new iPad, one CSS pixel actually has four bitmap pixels, and one is divided into four, obviously not enough, only colorApproximate SelectionTherefore, the image is blurred (©Smashingmagazine )!

Therefore, for high-definition display of images on the Retina screen, the original size of the images we need cannot be 200x200 pixels, but 2 times the height, that is, 400x400 pixels, the CSS pixel limit is still:

img {    width: 200px;    height: 200px;}

At this point, the Retina screen displays OK (non-Retina screen images are compressed-pixel sampling is reduced-A waste of resources !) (©Smashingmagazine ):

Therefore, different pixel resolution ratios on different iPad platforms are the most compatible!

Recently, a pad-related project is coming to an end. Just like this, there is a big gap between the product and the comments. The difference lies not in the technical implementation ...... After all, it is not driven by excellent parties ...... (Don't hold back, let's talk about it ~) For example, when a railway was built, the line was quickly planned. As a result, granite geology was found during road construction. The biggest trade-off method was to modify the design route. The result was a slogan: the workers, I believe in your technology. Everyone is not afraid of difficulties and obstacles. Come on together ...... All of us understand the results --It is silly to use technology to make up for design defects!

There are a lot of things that can't be done by one person. Let's do something practical: fishing, sharing some technical experiences, maybe more valuable, haha!

Ii. Design Drawings

The design must be designed for high definition, that is, the width is 2048 pixels. Why? History is forward, and backward compatibility is king and trend.

When determining the CSS pixel size of an element, the design size divided by 2 is the exact value. For example, on the design drawing:

Iii. CSS Image Generation

Obviously, some rounded corners and gradient are implemented using css3. In this way, both the high-definition screen and the ordinary screen are very good, especially on the new iPad!

For example, the text in the voucher icon above is text, and the subsequent gradient and rounded corner are all CSS implementations. The Code is as follows:

. Priv_icon_coupon {display: inline-block; width: 70px; Height: 70px; border-radius: 0.1em; Background-image:-WebKit-gradient (linear, 0 0, 0 bottom, from (# ef137a), to (# 9c117a); Font: bold 50px/64px ""; color: # FFF; text-align: center; text-Shadow: 0 1px rgba (0, 0, 0 ,. 5 );}

<SPAN class = "priv_icon_coupon"> coupon </span>

As shown in the following figure, the new iPad displays very delicate results in the Chrome browser. (If I don't get it, I just want to figure it out. I can't take a picture of it on my Nokia phone ~~)

Or the following graphic effects (in chrome) can be implemented using CSS-No worries about compatibility issues such as IE!

4. Customize the icon Fonts)

Not all images can be generated using CSS, such as many small solid color icons. At this point, we can use another technology: Custom icon font!

I made the product using the free open source icon font of icomoon. Select the appropriate small icons based on the design drawing to generate a Custom font. For more information, click here to view details!

Someone once complained that the website is too new to be used. In fact, you don't have to worry about it. First, on the same modern browser, the font you selected will be stored locally, and your previous selections will be automatically displayed the next time you open the browser, even if the local information is removed, you can edit and generate a new SVG font file by importing it!

For all the icon fonts I used in the project:

The related CSS is as follows:

/* custom fonts */@font-face {    font-family: ico;    src: url(/b/pad/font/icomoon.eot);    src: url(/b/pad/font/icomoon.eot?#iefix) format(‘embedded-opentype‘),        url(/b/pad/font/icomoon.woff) format(‘woff‘),        url(/b/pad/font/icomoon.ttf) format(‘truetype‘),        url(/b/pad/font/icomoon.svg#icomoon) format(‘svg‘);}

Of course, traditional Web Development@font-faceThe related code is different from the above (you don't need to worry about the earlier version of IE browser). For details, see my previous article "css3 @ font-face achieves a triangular effect with controllable color size.

The advantage of using a Custom font image is that no matter how high your screen pixel ratio is, my image is fine and smooth, and the higher the pixel ratio, the better the effect! Therefore, there is no need to worry about the screen resolution difference between ipad2 and ipad3!

For example, in the Chrome browser, the page proportion is quite large with the mouse, and the effect is smooth:

5. Use SVG background

I have not used the SVG background in this project, but I have used it in the previous mobile phone project. similar to this, it can solve the compatibility problem between the high-definition iPhone and the general iPhone, for details, refer to the preceding article "SVG features, support, and some practical problems ".

The following is an example of the boundary effect:

Click here to view the SVG file: circle. SVG

This SVG file is self-drawn. If you want to create an SVG file by yourself, see here.

6. Backward compatibility under Background-size

Some small icons, designers make them gradient, border, and irregular. At this time, the Custom font is not fixed (only partial text gradient is supported ), SVG is also uncertain (its own drawing capability is limited, 55555555), so we have to use traditional images.

At this time, the even strategy is like this. The original size of the HD image is extracted from these small icons, and the background-size is used to limit the size, so the HD devices are given priority; because they all belong to small icons, the wasted size is limited. In terms of trade-offs, it is the best strategy.

For example, the following design results:

The image information is as follows:

It can be seen that the height is only the original height on the design drawing. In actual CSS processing, the size is limited to 1/2. The Code is as follows:

Star,. star_in {Background: url(star.png) Repeat-X; Background-size: 14px 30px;/* Raw size 28x60 */}...

So, in the end, the high-definition display under the HD new iPad, the effect is amazing; the ordinary pad is compressed by 1/2, the effect is also good, it is clear!

Of course, if you have enough energy to pursue perfection, you can use CSS for precise control, for example:

@ Media only screen and (-WebKit-Min-device-pixel-ratio: 1.5) {/* When the pixel ratio of a device is not less than 1.5 ...*/}

7. Common IMG images that are most difficult to process

Display images are the most difficult to process.

For example, for a restaurant image, CSS limits the pixel width to 480x320. If we directly display an image of 480x320 pixels, the image is equivalent to 2 times the stretch effect-blur! If you restrict HD 960*640 images, oh, my gaga! This increases the image size by 4 times. That is to say, on average iPad, 3/4 of the image traffic is redundant and wasted, the key display effect is not as good as 480*320 pixels! How can we weigh and play games !?

Theoretically, the best practice is to display images of different sizes on different screen devices. The procedure is as follows:

1. Prepare several sets of images. The size and width are exactly 2 times or 1.5 times different (only for iPad Development). The image path must show the proportional size. For example:

   /1/a.jpg/1.5/a.jpg/2/a.jpg

2. The devicepixelratio parameter is used to determine which image to use. For example, under the HD iPad,window.devicePixelRatioIs2Therefore, our image HTML should be:

3. You can setdevicePixelRatioThe size of the notification background to achieve the perfect HTML output; or the specific URL displayed in the image is controlled using JavaScript, for example:

   var eleImg = $("img"), ratio = window.devicePixelRatio;eleImg.attr("src", eleImg.attr(ratio  > 1.5? "data-url2": ""data-url"));

However, the above practice is just a theoretical practice. In fact, if you fully follow the above practices, you will encounter many obstacles-resources, cooperation, implementation, and final results! To put it bluntly, it is a great deal of work. In the end, it may still be thankless-the boss is roaring with a high-definition iPad: Why is the loading of images on this waterfall stream page so slow !!

Or that sentence,Everything lies in the balance!

People commented on the iPad high-definition version. The dishes on the restaurant details page were blurred (I cannot figure them in my eyes ~); As you can see, public comments may choose the speed, rather than the quality of the picture (because there may be hundreds of special dishes here-although dynamic loading is used )!

However, some special images can be compatible.

For example, Google static images (with scaling) at the restaurant location ):

If you do not consider the new iPad and other Retina screen devices, you can simply use the following code:

The following results (not ):

However, the figure above is blurred on the latest iMac or on the new iPad. It is very incompatible with the delicate text and icons next to it. We need to perform special processing.

The new iPad is just twice the size.size=300x210We changed itsize=600x420And then scale the scale.zoom=12You can increase it by a bit, for examplezoom=16.

Therefore, the HTML code for the new iPad is:

The following results (not ):

As for how to display different pictures on different screens, there are a lot of ways for you to use different methods.

For example, my restaurant information (including static Map Locations) is loaded using Ajax load HTML. Therefore, when I request Ajax, send the pixel ratio of the device on the iPad to devicepixelratio to the background, and send other things to the background for judgment and output!

I am not very familiar with static map research. There may be some improper solutions here. I would like to thank you for your correction!

8. Oh, this is the conclusion.

The content of this article is actuallyNot only for iPad page creationAnd mobile phones. With the increasing popularity of retina desktop display (for example, 2012 iMac uses a "retina" screen, some other monitors will follow suit in the future ~~), Our traditional web page development will also face new challenges-not only processing different display resolutions, but also processing different device pixel ratios!

It seems that Apple has a wide range of things to subvert, so it cannot be spared.

The development is fast, and it is not easy to stop. Opportunities and challenges coexist. Come on, Arang!

Recommended: Towards a retina Web

Original article, reproduced please indicate from Zhang xinxu-xin space-xin Sheng live [http://www.zhangxinxu.com]
Address: http://www.zhangxinxu.com/wordpress? P = 2732

Compatible processing of retina new iPad and general resolution iPad pages