#A MATTER OF SIZE SCREENIT ANDROID#

Many Android devices have a device-pixel-ratio of 1.5, so things are scaled at one-and-a-half times larger than the hardware pixel. The iPhone 4 has a device-pixel-ratio of two, so it measures pixels as twice the size of a hardware pixel. We can combine that with dimensions to identify types of devices with some amount of accuracy. We can use the device-pixel-ratio media query to identify devices with scaled pixels. But we can use media queries to identify the inconsistencies and adjust accordingly. It’s safe to say there is a problem with pixels. Identifying break points and moving forward #section4 Sadly this is not the case as far as a website is concerned, the Galaxy Tab is 400px - 683px and the Kindle Fire is 600px - 1024px. A developer might look up information on these two devices and think that if the screens are the same and they both use the Webkit rendering engine their website will look the same. It is impossible to develop for new devices without having one to test on because the only specs released speak in terms of hardware pixels. For example, the original Galaxy Tab and the Kindle Fire have the exact same screen size and resolution but pixels on the Tab, which adjust for the reference pixel, are measured at 1.5 times that of the Fire, which uses hardware pixels. We also don’t know what each device considers a pixel and this is a problem. 1: Standard pixel sizes on the Galaxy Tab and Kindle Fire. For all those mobile sites that disable zooming it would be impossible to use.įig. Imagine if the iPhone 4 told a website it was actually 640px text would render at half size, such that without zooming, that website would be nearly impossible to read. It would be wonderful if web developers had these units as well, but without shifting the current definition of a pixel entirely, the pixel-based web would break.

#A MATTER OF SIZE SCREENIT FOR ANDROID#

Splitting the definition of a pixel into two units is great for Android but the web has to deal with years of pixel based designs across all kinds of devices. This allows developers to use hardware pixels for crisp graphics and patterns by using px or the new relative definition of a pixel for text sizing and consistent proportion across devices by using dip. Android devices have a new unit, called the “density independent pixel” or “dip,” which developers can use to distinguish the number of optical pixels an item spans. Reference pixels are amazing, but now we have two conflicting definitions. When implemented properly, this new standard will provide unprecedented stability across all designs on all platforms no matter the pixel density or viewing distance. If the viewer holds their phone up so it is side-by-side with the projection, the pixel sizes should look identical no matter the resolution or pixel density the devices have. When using a phone that you held close, a reference pixel will be smaller on the screen than a projection you view from a distance. The beauty of using a reference pixel is that it takes proximity to a screen into account. This new pixel should look exactly the same in all viewing situations. Now, instead of every pixel-based measurement being based on a hardware pixel it is based on an optical reference unit that might be twice the size of a hardware pixel. The w3c currently defines the reference pixel as the standard for all pixel-based measurements. The reference pixel and splitting atoms #section3 These properties make the hardware pixel like the atom: the unit of design on which we build everything. Because the hardware pixel relates to a physical element on a screen it cannot be stretched, skewed, or subdivided. Light from these three sub-pixels is mixed to create the colors we see. It’s the smallest point a screen can physically display and is usually comprised of red, green, and blue sub-pixels.

Most of us are familiar with the hardware pixel. But what is a pixel on high resolution devices today? Why does the 640px - 960px iPhone 4 claim to be 320px - 480px in the browser? The truth is that there are two different definitions of pixels: they can be the smallest unit a screen can support (a hardware pixel) or a pixel can be based on an optically consistent unit called a “reference pixel.” The hardware pixel #section2 Browser zooming is one thing and has been covered on QuirksMode. Now that hardware is changing and pixel densities are growing, pixels are struggling to find relevance as the stable unit they once were. 3 days of design, code, and content for web & UX designers & devs.

A matter of size screenit