0

I have a quick question, as all of my searches have turned up app design and not web design answers.

When designing for Retina, what should I put in my CSS to make a 1px horizontal line appear as just that - 1px? I don't want it doubling up, but I also can't make it 0.5px apparently.

Or does it render pixel-specified borders as it should?

Everything I've looked into so far just makes it so much more confusing.

Rob
  • 153
  • 1
  • 2
  • 11
  • Is this a `border`? Or are you creating a 1px graphic? Also, post some code if you have it. – matthewpavkov Mar 17 '13 at 03:52
  • It's simply a div with the "border-top: 1px" attribute put on it. Because I want it to be mobile, I only use two images (one is bitmap and I don't care for the loss of quality so much), the other is a .SVG (logo). From articles that I've read, retina displays turn the 1px border into 2px. But others say that's not the case as CSS pixels are separate from device pixels. Just want to clarify that that the 1px will still display as 1px even on Retina because it's CSS based. If not, a workaround that allows me to place the border strictly at the top. – Rob Mar 17 '13 at 04:04

1 Answers1

1

I'm assuming from your tags on the question, that you have a 1px border created in CSS. There is no need to adjust the border for high density displays. When the border is rendered by the browser, whatever calculations that need to be made for it, will be. So, you'll get a crisp 1px border in any scenario.

Unfortunately, I cannot locate a resource that states this explicitly. However, I know from my personal experience (developing websites, including mobile) that I never make any adjustments to border thickness for high density displays. I only do this for graphics.

This is one of many reasons why using CSS to create your graphics is useful.

matthewpavkov
  • 2,918
  • 4
  • 21
  • 37
  • Ah. See, http://bradbirdsall.com/mobile-web-in-high-resolution that article made it confusing as it was stating that border effectively doubles on retina, and the only workaround is to use a negative value in a box-shadow effect to display the border correctly. – Rob Mar 17 '13 at 04:07
  • 1
    Rob - that post seems to be incorrect. I actually just ran a test. I used an iPad Mini (standard display) and an iPhone 5 (retina display). I'm not seeing the `1px` border on my iPhone appear as a `2px` border, which is what I would expect. I ran this test locally and inspected the borders visually. Here is the code I used: http://jsfiddle.net/3pLqQ/ – matthewpavkov Mar 17 '13 at 04:27
  • I would love to see someone else chime in here with a post explaining what should happen. I'm going only off of observation. – matthewpavkov Mar 17 '13 at 04:28
  • I suspected as such as other articles wrote about how CSS pixels still displayed correctly as they are not device pixels. I thought that was the case because, as matthewpavkov mentioned, it's why using CSS to create graphics is so handy (and so recently pushed upon designers to use, instead of PNG/JPG/etc images). That article just made it more confusing. Hopefully someone can confirm this as I also lack any form of high density pixel display. – Rob Mar 17 '13 at 05:42