2

I have an iphone 6 which has a pixel width of 750px according to:

https://support.apple.com/kb/sp705?locale=en_US

However when working with media queries in an RWD debugger the width is 375px which is half the spec.

Can I assume for some reason that the browser uses 2px to make 1px. Why is this so?

1

In my opinion, we need to explore some aspects of the history of the monitors and displays.

Early size

The early digital images were made of really big picture elements, pixels, because of the poor processing power.

As processing power evolved, you can process more pixels on a screen, therefore, less noticeable.

Standarization of the "pixel dimension"

At some point, the pixel size was good enough, so more pixels could be used now for bigger screens, maintaining somehow an average pixel density, (how many pixels were on a physical unit, an inch).

One example is that you could find for example computers using, let's say, 800x600px on a 15 inches monitor or 1024x768 on 17 inches ones an improved system.

This would be the times when Windows defined its resolution to be 96 PPI as being superior to the 72 PPI defined by apple on the earlier Apple systems...

Projection

All this time the pixels were just projected on cathodic ray monitors; in an analogic way, they were not an intrinsic part of the monitor, of the display.

Pixel as hardware

Then the digital displays came into the game. Plasma and LCD monitors had a specific native matrix of display elements.

Now the minimum size of a displayed element of an image was defined by the actual size of this display elements. Where the projection of the pixels once defined the resolution now they were defined by this display elements.

The term pixel was already established. No new term was invented for this digitally controlled display elements... And the confusion started.

CSS

The CSS specification started when the displays were still CRT based, and on a time when the pixel density was more or less stable.

So using px as a unit was a reasonably good idea. In fact was a better idea than the previous one, using the "Medium unit". This unit was defined by the browser alone, to whatever the developers considered "medium". To prevent this discrepancies, people used more and more the unit px which was stable enough.

More processing power

As miniaturization of the components made portability a reality, this extra power was not used only for bigger displays, now were used for the original usage... more definition using smaller pixels.

As a marketing strategy, Apple uses the retina display concept to emphasize the resolution using small display elements.

But as you reduce the pixel size you can not use it to define text size, because your text would be tiny and unreadable.


More ingredients to the salad

There are different "pixels" involved now. The display elements, the actual digital picture element in the case of images, and the px CSS units.

To solve this we add more ingredients to the salad... 2x and 3x assets, real pixels and declared pixels...

Now the answer to your question

Declared unit

A phone (or screen) needs to declare to the browser a pixel size, to be used as a reference for the CSS units.

This is the smaller unit. 375px in this case. This unit is the one used to define for example the text size and the images size to be displayed on the screen.

Hardware resolution

And this is the real capacity of the screen due to the physical dimensions of its display elements. Normally it is a FullHD screen bigger or smaller in physical size depending on the model.

This resolution is greater than the declared one, and this extra power is used to render more definition to text, and behind the scenes to pull a higher resolution asset... a 2x image or a 3x one.

  • (For now on I will start calling this display element as dixel. Probably the capture elements of the sensor of a camera should be called capxel) – Rafael Oct 24 '18 at 20:25
  • If I agreed with you, we'd both be wrong. The display element has been named a pixel over 60 years ago. Have a peek at some of these well-written definitions <a>paulbourke.net/dataformats/bitmaps – Stan Nov 27 '18 at 21:23
  • 1
    The one that has no name is the hardware one. It is not the same as a pixel. – Rafael Nov 27 '18 at 23:26
0

Pixel width != physical width.

Although a retina display, such as an iPhone, will double the physical width of a device for pixels, then reduce to fit the physical width (increasing the pixel density), retina displays do not alter the actual physical dimensions of the screen. it's the iPhone which doubles the size of the device width, not Firefox dividing the image size in half.

Media queries are based upon physical widths.

(Physical widths are typically stated as using 1 point = 1 pixel. So 375 pixels wide for a device would actually mean the physical width is close to 375 points, not really pixels)

  • 1
    Pixels themselves don't have a physical size. There's no real-world measurement of a pixel. They are digital, you can't hold them, you can't measure them. They can be very tiny or the size of a building, but would still be a pixel. Manufacturers have taken to the premise that 1px = 1pt as a general concept of measuring the unmeasurable (pixels). So when a device's screen is reported as being 375px wide, that would translate to 375 points wide but you can cram 50,000 pixels into that, or 50 pixels. Apple devices with retina displays shove 2 to 4 times the pixels into the same size. – Scott Oct 22 '18 at 21:09
  • Sorry. I used the wrong word. How many distinct "units" would I see and what would these "units" be called ? If you don't know exactly could you estimate? – J.M. Oct 22 '18 at 21:13
  • I don't know what you mean by "units". The only "units" in a display are pixels, and as posted, there can be any number of pixels in any given image. A low pixel density image displays on an iPhone as does a high pixel density image. There's no 1 to 1 correlation to be made. – Scott Oct 22 '18 at 21:15
  • If I was a little tiny man walking in the screen how many "points" of color would I see. Obviously it is equal or more than 375 "points" as I can see these distinct points with out a microscope if I look hard enough. – J.M. Oct 22 '18 at 21:16
  • 1
    Each RGB grouping will represent a color ( based on magnitude set on each ). I'm wondering how many of these distinct RGB groupings there are width wise for my particular screen. Out of curiousity at this point. – J.M. Oct 22 '18 at 21:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.