2

What exactly are the factors that determine the css pixel ratio for a device. And, as a bonus, is the size of a css pixel the same across different devices of different resolutions

James Fair
  • 598
  • 1
  • 7
  • 18
  • [This answer](http://stackoverflow.com/questions/18500836/should-i-use-max-device-width-or-max-width/18500871#18500871) is somewhat relevant. It also links to some relevant articles one how everything is calculated. – Josh Crozier Apr 12 '15 at 00:34

1 Answers1

3

Each device reports its own dimensions and ratio. A css pixel takes into account the ratio (so if the ratio is 2, there are 4 pixels in each css pixel). The formula for finding the number of actual pixels in each css pixel is ratio^2. On the iPhone 6+, the device reports a higher resolution and ratio, and downsamples the page to fit the smaller 1920x1080 screen.

To answer the second part of your question, there is no convention for pixel density and ratio on these devices, so if text size is static, text could look huge on one phone and tiny on another. For these reasons its usually good to use the "vw" or viewport-width unit on your text size when developing for mobile.

Here is an excellent link for finding the ratios and device widths for various phones

Carson Crane
  • 1,197
  • 8
  • 15