3

I ran across the issue that my design concept for displays like iPhone 4 included 1px borders and I didn't know the Retina devices measures CSS with an aspect ratio of 2x.

So I started designing the page by taking advantage of a media query for max-device-width:640px (for portrait) and came to recognize this will only look as expected, if I set the viewport meta to initial-scale=.5.

The problem is: If I don't want to set initial-scale=.5 and define the media query in real pixel dimensions of the iPhone, there seems to be no way to achieve a 1px wide border or such on a Retina display because setting border:.5px will force iOS to compute an integer value of it – which seems to result in rather 0 than 1.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Circuit Circus
  • 161
  • 10
  • 1
    Double-density screen doesn't mean that it shows 1 pixel as 2. Just set a border to 1px and it will be 1px. And you don not need to set `max-width: 640px` to target a device, it's the same 320px for the iPhone. – Tigran Petrossian Sep 21 '13 at 13:00
  • You could check if a value of `.5px` works. Or `.33pt` for instance. – Mr Lister Sep 22 '13 at 07:48
  • @TigranPetrossian The iPhone 4 actually has twice the resolution and twice the DPI of the iPhone 3. And if you don't take measures, the browser will multiply all the pixel values by 2, because otherwise, the output would be really really tiny! – Mr Lister Sep 22 '13 at 07:57
  • Thanks, Mr. Lister! Unfortunately neither `.5px` nor `.33em` can handle this. Both return no line at all on a Retina iPhone... I guess I will have to change my concept to not include "true" 1px-lines. – Circuit Circus Sep 23 '13 at 12:53
  • @TigranPetrossian Even thought the screen is double density, you still get the same 320px for the iPhone, and hence 1px border looks a bit too fat. I have had success using 2px x 2px image and scaling it by 50% and then repeating. I know this is not the perfect solution, but seems to work. – Thilak Rao Dec 09 '13 at 06:17
  • @ThilakRao In the end you're right – this is a solution that works but it's sort of a hack that's not even cleaner than working with the viewport-meta I stated… – Circuit Circus Dec 13 '13 at 11:14
  • possible duplicate of [Can you have a 0.5px border on a Retina Display?](http://stackoverflow.com/questions/8640521/can-you-have-a-0-5px-border-on-a-retina-display) – NVI Jan 08 '14 at 08:01

2 Answers2

4

This is how I've achieved 1px borders on the iPhone (tested on iPhone 5).

<span class="hr"></span>

.hr {
    display: block;
    width: 100%;
    border-bottom: 1px solid black;
    -webkit-transform: scaleY(0.1);
}

Obviously this makes it tricky to apply 1px borders to anything that actually acts as a container, but it'll do the trick for true 1px separators.

TylerH
  • 20,799
  • 66
  • 75
  • 101
monners
  • 5,174
  • 2
  • 28
  • 47
  • 1
    Thanks! Though this is not a way to go for me in sense of a solid, cross-browser/device-compatible concept, I appreciate to learn about webkit-specific CSS this way. I see there are lot features beyond my imagination of what the logic of stylesheets is about… – Circuit Circus Dec 13 '13 at 11:07
0

You can try:

border: thin solid black;
GooDeeJAY
  • 1,681
  • 2
  • 20
  • 27
DungGramer
  • 177
  • 10