0

Suppose that I want to render two capital 'T's, both precisely one inch tall. One 'T' is rendered on a Macbook Pro with Retina Display (220 DPI, CSS pixel ratio 2), and the other is rendered on an iPhone 4S (326 DPI, CSS pixel ratio 2). In order to do this, I set the font size on the Macbook Pro to 220 / 2 = 110px, and the font size on the iPhone 4S to 326 / 2 = 163px. However, the two 'T's are still not the same size. Why? Also, what can I do to make sure that the two 'T's are of the same physical size?

Edit: Yes, I am using media queries. I didn't want to get into the gory details, but I hinted at it by mentioning the use of the CSS pixel ratio. Assume that I am somehow magically able to obtain the DPI and CSS pixel ratio of the client monitor in all cases.

Thanks for your insight!

void-pointer
  • 14,247
  • 11
  • 43
  • 61
  • 1
    Make sure everyone is using the same monitor. – Mike B Sep 03 '12 at 04:04
  • @MikeB Right, but shouldn't I be correcting for this by scaling by the DPI? Understandably there should be minor differences in the sizes of fonts that are declared using the same pixel values across different browsers. However, I'm using Safari in both cases. – void-pointer Sep 03 '12 at 04:06
  • And what if I increase the text zoom in my browser? – Matt Ball Sep 03 '12 at 04:06
  • @MattBall If I use pixel values (at least to my understanding) that shouldn't work. In the case that it does, assume that all users are not using text zoom. – void-pointer Sep 03 '12 at 04:09
  • If I have a box that is 100px big, and I zoom to 2:1, then you're saying the box would still be 100px big? I think your maths is a bit screwy. – zenkaty Sep 03 '12 at 04:22
  • @zenkaty I'm assuming you're commenting about CSS pixel ratios? If you are, [here you go](http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html). If not, I don't understand what you mean. – void-pointer Sep 03 '12 at 04:26
  • A "CSS pixel" is very different to a physical pixel on your monitor, which is what you're trying to achieve your "consistent size" with. Perhaps this is where you're getting confused. – zenkaty Sep 03 '12 at 04:28
  • @zenkaty I'm still not quite sure what you mean. In terms of units, what I did should make sense, i.e. 1in * 220 DPI (physical px / in) / (2 physical px / CSS px) = 1in * 220 ppx / in * cpx / 2 ppx = 110 cpx (CSS px). – void-pointer Sep 03 '12 at 05:04
  • http://stackoverflow.com/questions/422296/how-do-i-determine-the-true-pixel-size-of-my-monitor-in-net – zenkaty Sep 03 '12 at 05:11
  • @zenkaty Ah ok, so pixel font values may have their sizes depend on both dimensions. I'll try this out and post results. – void-pointer Sep 03 '12 at 06:24

1 Answers1

0

I think the concept under which this has to be done is media queries and there is no mention that you are doing this using media queries. You can target both iPhone as well as iOS using media queries to get the desired effects:

More is here

defau1t
  • 10,593
  • 2
  • 35
  • 47