Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Hexiii

macrumors 65816
Original poster
Jun 30, 2011
1,113
373
Prague, Czech Republic
Okay, I've read alot about making a website for retina displays, however, I have still some questions:

1) Did I get right, that retina displays display the content twice as big, since it would be too small if it was displayed in normal size (e.g. 960px width)?

2) The "retina" word is everywhere, although it's just a term by Apple for their displays. Does that mean that other high-density displays (Galaxy's 441ppi) work the same way or do they display it normally. Well... it's still a phone so the website wouldn't fit twice as big into the screen, so let's say there is a 441ppi computer screen.

3) (If the first is true) The retina displays display the content twice as big, since the density is doubled from the original. But in which ratio (if the second question is true) do the other (441ppi) displays display the content?
 

UTclassof89

macrumors 6502
Jun 10, 2008
421
0
this is a helpful article discussing CSS pixels vs. Device pixels (web browsers display images using CSS pixels, regardless of device pixels, so, no-- a Retina display won't reduce or enlarge your web graphics' size)
 

Hexiii

macrumors 65816
Original poster
Jun 30, 2011
1,113
373
Prague, Czech Republic
this is a helpful article discussing CSS pixels vs. Device pixels (web browsers display images using CSS pixels, regardless of device pixels, so, no-- a Retina display won't reduce or enlarge your web graphics' size)

I already read that article.

On standard-density displays, 1 CSS pixel corresponds to 1 device pixel.

What's standard density then? Is there some ppi line when the display is considered a high density and then 1 CSS pixel = 4 device pixels?
 
Last edited:

Yvan256

macrumors 603
Jul 5, 2004
5,080
991
Canada
I already read that article.



What's standard density then? Is there some ppi line when the display is considered a high density and then 1 CSS pixel = 4 device pixels?

PPI is for print. Don't start thinking about PPI for the Web unless you want go insane. ;)

The browsers usually do everything for you. The regular displays use the usual 1 CSS pixel = 1 device pixel.

A HiDPI display with twice the resolution (i.e. 4 pixels instead of one) would require an image at twice the resolution but still displayed at the usual 1:1 ratio.

Example: you would use the following HTML code to display a 200x200 pixels image:
[img src="/images/My-HiDPI-image.jpeg" width="100" height="100" alt="A nice HiDPI JPEG" /]

Most recent browsers, I mean browsers which aren't 5+ years-old Internet Explorer browsers, will usually resample (instead of resizing) images in order to display them without jagged edges.

So for your HiDPI HTML/CSS code, just use twice the resolution. You should use CSS to detect the device pixel ratio so that you don't send HiDPI images to users with regular displays.

You might also want to think about mobile users because of monthly data caps, so don't go too heavy with graphics. A HiDPI JPEG, for example, can probably be saved at a lower quality setting since the compression artifacts are going to be smaller than usual.
 

Hexiii

macrumors 65816
Original poster
Jun 30, 2011
1,113
373
Prague, Czech Republic

PPI is not only for print, I was talking about ppi of a display not an image.

HiDPI means (at least I think) that a certain display has high ppi (for example iPhone retina display - 326ppi).

But I don't get the doubling pixel thing... Are the displays (computers with that displays) made in a way that they scale everything to the same size (real dimensions - cm, inches etc.) like on regular display and therefore you need double resolution? Because if it stayed in the same pixel dimensions, it would be really tiny because of the HiDPI?

Or is it the browser which when detects HiDPI screen, it behaves that way?

I am sorry, if these questions sound stupid, but I think I am missing something... :)
 

Yvan256

macrumors 603
Jul 5, 2004
5,080
991
Canada
PPI is not only for print, I was talking about ppi of a display not an image.

But whatever the PPI of a display is, you'll never be able to know. The only information you will have access to is the pixel density. Displays are not like print, you don't control the physical size of what you display, that's why I said to forget about PPI for displays.


HiDPI means (at least I think) that a certain display has high ppi (for example iPhone retina display - 326ppi).

Again, I don't use PPI to account for that. As soon as something has a pixel density over 1:1, I count it as "HiDPI".

But I don't get the doubling pixel thing... Are the displays (computers with that displays) made in a way that they scale everything to the same size (real dimensions - cm, inches etc.) like on regular display and therefore you need double resolution? Because if it stayed in the same pixel dimensions, it would be really tiny because of the HiDPI?

Or is it the browser which when detects HiDPI screen, it behaves that way?

I am sorry, if these questions sound stupid, but I think I am missing something... :)

As far as the CSS and HTML are concerned, the displays are still 1:1, i.e. your 960 pixels wide HiDPI display is still 480 pixels wide in your code.

But if you, as a coder, detect HiDPI via the CSS media queries, you need to supply double-resolution images. Everything else, coordinates, etc. are still 1:1 otherwise people would go nuts trying to maintain everything.

It was also the easiest way to maintain compatibility with current non-HiDPI websites.

So to make a "Retina" website, just code everything as usual but use CSS media queries to supply double-resolution graphics when appropriate. Also use media queries to supply normal-resolution graphics, to avoid either from having to download two sets of images.
 

Hexiii

macrumors 65816
Original poster
Jun 30, 2011
1,113
373
Prague, Czech Republic
But whatever the PPI of a display is, you'll never be able to know. The only information you will have access to is the pixel density. Displays are not like print, you don't control the physical size of what you display, that's why I said to forget about PPI for displays.

But pixel density = ppi (pixels per inch)


Again, I don't use PPI to account for that. As soon as something has a pixel density over 1:1, I count it as "HiDPI".

Yeah, but what decides which density is over 1:1? I know retina pixel density is doubled but where is the line when it counts as HiDPI? You can also double 50ppi and it will still be low number, therefore not counting as HiDPI.



I know what should I do when making a website for retina displays, I am just trying to get the theory.
 

Yvan256

macrumors 603
Jul 5, 2004
5,080
991
Canada
But pixel density = ppi (pixels per inch)

No, it's not PPI. I'm sorry I used the term "pixel density" above, I meant to write "pixel ratio".

The pixel ratio is a value which indicates the density versus a regular display. An iPhone 5 will have a pixel ratio value of 2.0 because it uses two pixels horizontally and two pixels vertically to display a single "regular" pixel.


Yeah, but what decides which density is over 1:1? I know retina pixel density is doubled but where is the line when it counts as HiDPI? You can also double 50ppi and it will still be low number, therefore not counting as HiDPI.

The CSS media query code will return the pixel ratio of the device, you're not the one deciding or calculating anything. A device could have a pixel ratio value of 1.5, that's not double the normal resolution but it's still higher than 1.

I know what should I do when making a website for retina displays, I am just trying to get the theory.

As I said in my first reply, forget the PPI, it's not used in the code.

Read about CSS pixel-ratio.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.