Wednesday, November 27, 2013

The average query that identifies the type of pixel density: @ media only screen and (-webkit-min-d


Do you want to eliminate that 'annoying blur effect in an image when it is displayed on the retina display? Let's see what are these new high-resolution display and analyze possible solutions.
A few months ago I had to replace my macbook pro 15 "with the new retina 3gn display macbook. 3gn I noticed a clear difference between the standard display and the retina display: immediately jumps to the eyes, the quality of high-resolution images. One has the feeling of diving in the image itself and to live a spectacle of color, gloss and shades richer and brighter. The retina display, now a trademark for Apple, refers to the liquid crystal display with a high pixel density, so high, that the naked eye can not distinguish individual pixels. These screens 3gn allow you to display every detail any item on the display: text, images, icons. The difference between the retina display and the standard display is clear and we see why.
This table lists the templates apple and some important 3gn features: resolution, screen size, mean distance calculated display of the device, pixel density associated with each device. The amazing thing is immediately evident is that an iphone 4-inch 3gn retina display has a pixel density (Point per inch) greater than that of a 27-inch iMac. Why is this?
Steve Jobs claimed that the iPhone beholder about 30 cm away, can not distinguish individual pixels if the pixel density is higher than 300 PPI, and for this reason it has doubled the pixel density for these devices. 3gn It is clear that an iphone 4 inches is viewed from a distance of about 12 inches and that is 30 cm; a imac 37 "appears instead to about 30 cm; shorter the distance display of a device the higher the density of the pixels in the display in the retina. But it is important to understand the difference between css pixels and device pixels.
The css pixel is an Abstract used by the browser to display content on a web page independently of the capabilities of the device. 3gn The device pixel is the smallest unit of a physical display (pixels). Each pixel has its color and its brightness; The number of pixels 3gn present 3gn in one screen determines the density of the screen.
In a standard display, css 1X1 1X1 pixels corresponds to device pixels, the display in the retina instead of the 1:1 ratio becomes 1:2, and the pixel density is doubled for which a square of 50X50px in a retina display device for use 100X100px maintain the same physical size of the square. Let's see what solutions there are to improve our image on the retina display:
What happens when we display an image created for a standard display on a retina display? The picture looks blurred, the edges are not clear and clean as they should be. This is because the original image view on a display with double the pixel density is resampled, 3gn leaving the original size but adding more pixels. The first solution is to use an image format SVG (scalable vector graphics) and to edit with style sheets. The logo is usually made in vector format in order to give the possibility to change it, after having turned in. Svg, create its container in HTML that will remain empty and modify it with the background-image property. The only problem is that IE does not support SVG images and need to convert them Modernizr library and read them as PNG. I used this solution 3gn to change the logo of a company that resulted in blurred retina display. <div id="logo"> </ div>. logo {background-image: url (vimer.svg); background-size: 55px 150px, height: 150px; width: 55px;} / * code for IE * / < img src = "vimer.svg" date-png-fallback = "vimer.png" />
The icons are very fashionable and are used to achieve social menu, navigation menu or menu service. In addition to being attractive from the point of view of graphics are very important for the optimization of a website if used as a symbol-font. The font-icon images are treated as text and therefore can be changed with css styles. In this article you can see how to use a picture as a simbol font; <span to class="icon"> a </ span>
The media queries in this case are used to select the pixel density used by a particular 3gn device (in this case we are interested in selecting devices with retina display). If the condition is satisfied, the browser will call those high-resolution photos, or upload the images by default.
The average query that identifies the type of pixel density: @ media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-

No comments:

Post a Comment