The W3C documentation states the following:
Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.
This kind of makes sense for standard elements, like divs and tables. If the screen has a greater pixel density, more real pixels are reserved for a CSS pixel, in order to keep the actual element dimension roughly equal on all the screens regardless their density. In this sense, CSS pixels can be seen as a pseudo-absolute length measure.
But what about images? I know it's bad practice to let the browser to resize images. But then how source image's pixels are treated? I suppose it can't be the same as other elements, otherwise I would get a low resolution image on high-density screen, given that more device pixels are assigned to a single image pixel.
If the resolution of an image is lower than the resolution of the screen, the graphic card will add pixels to make the image fill the pixels needed.
So if your image has the same resolution than your screen, each pixels of the image is rendered in each pixels of your screen.
But if your image has a lower resolution than your screen, and if the graphic card would not do the job, your image would appear smaller because it has not enought pixels to fill your actual screen resolution.
As your can see, the graphic card will always force a middle color, which is a medium between your two colors.
Obviously, if you image if a full black pixels, the middle color of black-black is black, so the image will not appear stretched.
Related
Why bother with pixels? One person has a very large display with very few pixels, another has a medium display with medium density, let's say 1080p 24inch, and yet another is using a 1440p phone display.
What is even the point of using media queries using pixel sizes??? How do I query the actual display size in centimeters, which is exponentially more useful?
What I want it for: actually reliably determining whether to use mobile or desktop style.
No JS, it is too slow.
Difference between Viewport and Resolution
The Pixel & Pixel Per Inch
Mobile and other similar devices' screens are contained on pixels (individual points of color) and together when all pixel display feels like an image. Number of pixels on the horizontal axis and the number of pixels on vertical axis called resolution. The sharpness of images/text or anything which is displayed on a screen depends on the resolution and screen size. The same pixel resolution will show sharper on a smaller screen and gradually lose sharpness on large screens because the same number of pixels are being spread over a large n number of inches.
Normally the screen's physical size calculated in inches and as resolution depends on the screen's physical size so to determine screen's resolution unit is called Pixels Per Inch.
Number of pixels increases per inch it increases the quality of display and ratio. Here is a question: how many pixels in an inch so we can calculate resolution of a screen? Well, there is no specific answer because we can't set some single value for all screens it also varies from screen sizes Typically it lies between 72 - 162 pixels per inch and its value increases as the screen goes smaller.
Viewport
Device's visible area for a user is called, the actual viewport size of the screen.
Viewport screen size
Viewport screen size is the actual resolution of any screen and it depends how much unit of pixels per inch simply. Viewport always remains same in terms of screen size as screen size remains same but resolution to display it, is changeable for example old 15" monitors can display different resolutions from 800 x 600, 1024 x 768 and 1280 x 1023 so it depends on focus ability of a screen.
Note that As resolution goes smaller from its original or maximum display resolution, you will get blurry results because the same number of pixels is now spreading on big viewport size.
CSS Pixel Ratio
An inch can contain about 72 - 162 pixels. Let's consider 132 pixels per inch for a mobile as a unit for every device. One unit pixels equal to 1 CSS pixel ratio. So if unit pixels increases, CSS pixel ratio will be increased. For example a device has 296 PPI then it's pixel ratio can be 2 (after point can be ignored).
Resolution, Viewport and CSS Pixel Ratio
The resolution depends on CSS pixel ratio. If cases pixel ratio increases the resolution of the device can be increased, but remember viewport of size, which is the actual visible size of the screen will not change. The maximum resolution of a screen is actually a multiplier of CSS pixel ratio.
Example
iPhone 7
Viewport size: 375 x 667 Pixels
Resolution: 750 x 1334 Pixels
Pixel Density: ~326 ppi
CSS Pixel Ratio: 2
If I specify the width of a <div> tag using CSS as 96px, how many device pixels should that occupy on the screen of a first generation iPhone?
I added <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> to the page, took a screenshot on the simulator, and measured the div to be 96 device pixels wide. Now, I read the W3 spec for CSS pixels and it states that 1px is 1/96th of an inch. So 96 CSS pixels should translate to 1 inch. Since the original iPhone has a DPI of 163, one inch on the screen should occupy 163 device pixels. Why am I not getting that measurement? In other words, should 96 CSS pixels be equal to 1 inch?
I saw that the spec also mentions anchoring to a reference pixel. It seems to me that the reference pixel is simply a device pixel in this case. If I was to work backwards to get the CSS pixel values from a screenshot, would it generally be correct to assume that one device pixel equals one CSS pixel on the iPhone (non-retina display)?
Iphone pixels are like any other pixel. A 96px wide <div> is always 96px wide in any device. DPI (Dots Per Inch) just tell you the ratio between physical pixels (dots) on a screen (or paper) and inches and don't represent any size. DPI are only a ratio between pixels and a real world unit of measurement.
A 96px div would look 6x bigger in a 50 DPI screen than a 300 DPI screen.
DPI vary depending on the device or print/scan quality, therefore 1 inch is NOT always equal to 96 pixels. W3C is just saying that the absolute length units are fixed in relation to each other (it is just an arbitrary approximation to make CSS units consistent). This does not mean that real world units of measurement (inches, cm) can be given a fixed ratio to pixels.
The best help i can give you to understand this is that 1px is only and always equal to 1px. Any comparison between pixels and real world units depends on the DPI of a specific device, not on a standard like the W3C.
The absolute length units are fixed in relation to each other and
anchored to some physical measurement. They are mainly useful when the
output environment is known.
I am using bootstrap for my site. The responsive according to different screens is good unless i see on a square shaped large screen. The content is centred on normal screen using padding top and i want it do be at the bottom when it is viewed on a square shaped screen, since it looks odd with the white space left below. How do i make it responsive to square shaped screens or say large screens ? I tried making the position relative to the bottom, it doesnt work !
You can use media queries to target screens based on their pixel aspect ratio like this:
#media screen and (max-aspect-ratio:1/1) {
/* square styles here */
}
Here's a Fiddle of it in action.
This particular query only targets screens that are equal in height as in width or taller. If the aspect ratio is higher than 1:1, it means the screen is wider than it is tall.
If you want to target squares precisely, you can use :
#media screen and (min-aspect-ratio:1/1) and (max-aspect-ratio:1/1) {
/* square styles here */
}
I wouldn't recommend this though, as it will only fire at that exact pixel ratio, giving you no tolerance for varying display sizes, as you'll see in my Fiddle example above to this one. This could be making a lot of extra work for yourself.
Square screens are unique as normally a screen is either portrait or landscape in orientation, but a square screen can be neither. They are also quite rare as a display. Are you targeting Smartwatches perhaps?
Update in Jan 2023: Smartwatches have exploded in popularity and greatly-improved screen tech means displays are no longer restricted to oblongs like squares and rectangles. Displays can have rounded corners, be curved, fold open like a book, be circular etc.
All the more reason not to target exact sizes and ratios!
I have an image that has a zindex applied to it. I would like to the image to resize as the browser gets narrower. Since the image is about 250 pixels wide (much smaller than the browser window), the image doesn't resize till the browser window is narrower than 250px.
I know that is the normal way it should happen, but I would like the image to scale relative to the browsers width meaning that if the browser window is 1000 pixels wide and the image is 250 pixels wide then if the browser window is reduced to 750 pixels then the image becomes 188 pixels wide (a relative shrinking). Is this possible to accomplish in CSS?
Thanks
Of course you do!
Just use percentage instead of pixels to define the width.
But, if the image is inside of an selector that has the width defined in pixels, not in percentage, it may not work properly.
A client wants to have an image that takes up entire screen, on mouse over the menu would appear. The problem is the height vertical alignment for various screen sizes....What would be the most common sleek looking solution to this issue? Let's assume that the most common screen resolution for the site's audience is 1024x768 but it should look good on smaller resolutions too (specifically for laptops).
My initial idea was to use an image such as 1000x600 and black background...any other ideas?
Thanks!
Compare the aspect ratio of the screen with the aspect ratio of the image, then scale the image appropriately. For example, if the aspect ratio (width / height) of the screen is larger than the aspect ratio of the image, then it's too wide - so scale the width of the image but keep the height the same size as the viewport. Visa versa for if it's smaller. I think you can use PHP to achieve what you want.