Портативные дисплеи Retina: можно ли достичь границы в 1 пиксель с помощью CSS?

Question

Я столкнулся с проблемой, что моя концепция дизайна для дисплеев, таких как iPhone 4, включала границы в 1 пиксель, и я не знал, что устройства Retina измеряют CSS с соотношением сторон 2x.

Поэтому я начал разрабатывать страницу, воспользовавшись медиа-запросом для max-device-width:640px (для портрета) и узнал, что это будет выглядеть так, как ожидалось, если я установил мета области просмотра в initial-scale=.5,

Проблема в том, что если я не хочу устанавливать initial-scale=.5 и определить медиа-запрос в реальных пиксельных размерах iPhone, кажется, нет никакого способа достичь границы шириной в 1 пиксель или что-то подобное на дисплее Retina, потому что настройка border:.5px заставит iOS вычислить его целочисленное значение - что, скорее всего, приведет к 0, а не к 1.

Answer 1

Вот как я достиг границы 1px на iPhone (протестировано на iPhone 5).

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

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

Очевидно, что это затрудняет применение границ в 1px ко всему, что фактически действует как контейнер, но это сделает свое дело для настоящих разделителей в 1px.

Answer 2

Можешь попробовать

        border: thin solid black;