Можете ли вы иметь границу 0.5 px на дисплее Retina?

на мобильном Safari на iPhone 4 или iPhone4S, можете ли вы иметь границу div шириной 0,5 пикселей?

9
iphone safari subpixel

8 ответов

Я написал обзор различных техник:

пол-пикселя границы

border: 0.5px solid black;

плюсы:

  • работает только в Firefox и Webkit Nightly.

границы-изображения

border-width: 1px;
border-image: url(border.gif) 2 repeat;

границы.gif-это изображение размером 6×6 пикселей:

border image explained

плюсы:

  • это работает!

плюсы:

  • внешний образ. Это всего лишь 51 байт, и он может быть встроен с помощью URI данных. Вам нужно будет запустить Photoshop (или что бы вы ни использовали), чтобы изменить цвет границы, что не очень удобно.

несколько фоновых изображений

background:
    linear-gradient(180deg, black, black 50%, transparent 50%) top    left  / 100% 1px no-repeat,
    linear-gradient(90deg,  black, black 50%, transparent 50%) top    right / 1px 100% no-repeat,
    linear-gradient(0,      black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
    linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left  / 1px 100% no-repeat;

"как настроить физические пиксели на экранах retina с помощью CSS " описывает, как провести линию. Нарисовать 4 линии и у нас есть границы.

плюсы:

  • никаких внешних изображения.

плюсы:

  • громоздкий синтаксис, хотя его можно абстрагировать с помощью препроцессоров CSS.

масштаб вверх и вниз

упомянутый здесь уже Приит Пирита.

8

использовать border-width: 0.5px

Safari 8 (как в iOS, так и в OS X) приносит border-width: 0.5px. Вы можете использовать это, если вы готовы принять, что текущие версии Android и старые версии iOS и OS X будут просто показывать обычную границу (справедливый компромисс, на мой взгляд).

вы не можете использовать это напрямую, потому что браузеры, которые не знают о 0.5px границы будут интерпретировать его как 0px. Нет границ. Поэтому вам нужно добавить класс в свой <html> элемент, когда это поддерживается:

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
  if (testElem.offsetHeight == 1)
  {
    document.querySelector('html').classList.add('hairlines');
  }
  document.body.removeChild(testElem);
}
// This assumes this script runs in <body>, if it runs in <head> wrap it in $(document).ready(function() {   })

затем, используя сетчатку волос становится очень легко:

div {
  border: 1px solid #bbb;
}

.hairlines div {
  border-width: 0.5px;
}

лучше всего, вы можете использовать border-radius с ним. И вы можете использовать его с 4 границами (сверху / справа/снизу / слева) так же легко.

источник:http://dieulot.net/css-retina-hairline

8

да. Используйте масштаб. Стиль ниже даст вам hairline 

 .transform-border-hairline {
     border-bottom: 1px #ff0000 solid;
     transform: scaleY(0.5);
 }

когда вам нужны все стороны, то лучший способ-repliacte DIV с :after или: before CSS pseudoclass, примените границу к этому псевдоклассу, сделайте его вдвое больше, а затем масштабируйте его с помощью transform:scale down to half. 

pre:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px #999 solid;
    content: "";
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

более конкретно (и все эти трюки в использовании тоже) здесь http://atirip.com/2013/09/22/yes-we-can-do-fraction-of-a-pixel/

6

также я обнаружил, что этот метод работает (iOS7):

    background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='#ff0000' x='0' y='0' width='1' height='0.5'/></svg>");
2

Apple добавила поддержку для этого в OSX Yosemite и iOS 8.

@media (-webkit-min-device-pixel-ratio: 2){
    div {
        border-width:0.5px;
    }
}
2

С CSS, который можно сделать с помощью box-shadow и spread radius. Подход объясняется здесь: http://bradbirdsall.com/mobile-web-in-high-resolution

это скопировано из ссылки выше:

box-shadow: inset 0 0 1px #000,
            inset 0 1px 0 #75c2f8,
            0 1px 1px -1px rgba(0, 0, 0, .5);
1

совместное использование Sass / SCSS + Compass mixin я написал, и я использовал:

@mixin hairline($color, $side: 'top') {
  &:before {
    content: ' ';
    display: block;
    @if $side == 'top' {
      width: 100%;
      height: 1px;
    }
    @else if $side == 'bottom' {
      width: 100%;
      height: 1px;
    }
    @else {
      width: 1px;
      height: 100%;
    }
    position: absolute;
    #{$side}: 0;
    background-color: $color;
    @media (-webkit-min-device-pixel-ratio: 2) {
      @if $side == 'top' {
        @include transform(scaleY(0.5));
      } @else if $side == 'bottom' {
        @include transform(scaleY(0.5));
      } @else {
        @include transform(scaleX(0.5));
      }
    }
  }
}

пример CSS:

.my-element-where-i-need-a-retina-bottom-border {
  @include hairline(red, 'bottom');
}
0