This allows a layout with specific CSS dimensions to be displayed in a consistent way across screens with similar physical dimensions, but different numbers of hardware pixels making up that screen.įor devices with high-resolution screens, manufacturers define a device pixel ratio based on their screen size and resolution. If you are packing more pixels into a smaller space, those individual pixels will have to be smaller to fit - this means that the size of a hardware pixel can vary significantly from one device to another.ĬSS pixels, on the other hand, are designed to be roughly the same size across devices. The more individual hardware pixels that a screen has in a given screen size, the higher the resolution and the clearer that display will look. Hardware pixels are the number of individual display pixels (essentially dots of light) that make up a specific screen. To allow websites to display in a readable way on these screens, Apple created separate concepts for hardware pixels (sometimes referred to as display pixels or screen pixels) and CSS pixels (which are sometimes called software pixels). When Apple introduced Retina displays in iPads and iPhones, the pixel dimensions of these devices frequently were significantly larger than most existing full-size monitors while the physical screen sizes of these new devices were much smaller. Hardware pixels, CSS pixels & device pixel ratio High-resolution images for Retina displays.Hardware pixels, CSS pixels & device pixel ratio.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |