Photoshop Question posted in
The official user guide can be found here.

What is the difference between a physical width and CSS width in pixels? – Photoshop

I am currently using Photoshop, to create a series of Wireframes, for a future website design. Naturally, I will be wanting the website to be responsive; which will be aided by Bootstrap.

I will be working with the Smartphone screen sizes first and then scaling up the screen sizes accordingly.

According to Bootstrap, Smartphones generally range between 480px to 767px. Admittedly, the later being more Tablet based.

Where I am a little uncertain, is that when I check out the phone specifications, the physical screen widths are much greater than the CSS widths.

Let’s take the HTC One phone. The CSS screen dimensions are 360px by 640px whilst the physical screen width is 1080px by 1920px. Referring to the width, this would suggest the physical screen width is 3 times width than the CSS width of the website. After looking at a few websites, on the HTC One, the websites’ widths are certainly not 3 times smaller than the actually screen’s physical width.

I am just wondering if I have misunderstood something here. For example, pixels may be a different size when measuring physical screens for example.

Tags:

2

Answers


  1. 0

    CSS width is what’s used by the browser/css.

    Physical width tells you how many pixels the physical screens pack into every css pixel i.e. modern high-density screens can have 2x or 3x more pixels packed into every css pixel. Keyword “retina” screen.

    If you divide 1080px (physical) by 360px (css), you’ll get 3. That means this screen has 3x the pixel density as compared to a normal, old-school screen.

    Consequence: An image for that device needs to be 3x larger than normal css size in order to appear sharp (and not fuzzy) on that device.

    So, for the sake of Photoshop wireframing you want to use css width only. But when creating the actual images later you might want them to have in 3 different sizes:

    1) Normal (the same as css width)

    2) 2x bigger for screens with 2x pixel density

    3) 3x bigger for screens with 3x pixel density.

    EDIT:

    Here’s an amazing piece of a slow-mo video showing exactly what’s going on on a high-density screen. Watch how each individual pixel consists not only of 3 different color pixels but also how each color pixel consists of multiple physical pixels: https://youtu.be/3BJU2drrtCM?t=7m30s

    Login or Signup to reply.
  2. 0

    At the moment when devices with very high pixel density were issued, all software/sites on the market would be rendered too small and unreadable, so nobody would buy those devices. Vendors introduced logical pixels, so that existing sites would be rendered as usual, but fonts and vector icons would look smoother as there is extra sharpness due to physical pixels being smaller than logical.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search