Сетчатые дисплеи Retina: Можно ли получить границу 1px через CSS?

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

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

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

источник

2013-09-21 Circuit Circus

Экран с двойной плотностью не означает, что он показывает 1 пиксель как 2. Просто установите границу 1px, и она будет 1px. И вам не нужно устанавливать 'max-width: 640px' для таргетинга на устройство, это то же самое 320px для iPhone. –

Вы можете проверить, работает ли значение '.5px'. Или '.33pt', например. –

@TigranPetrossian iPhone 4 фактически имеет в два раза больше разрешения и в два раза больше DPI для iPhone 3. И если вы не будете принимать меры, браузер умножит все значения пикселей на 2, потому что в противном случае вывод будет действительно действительно крошечным ! –

Вот как я достиг 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 сепараторов.

источник

2013-12-10 05:07:36 monners

Спасибо! Хотя это не способ пойти на меня в смысле солидной, кросс-браузерной/совместимой с устройством концепции, я ценю, чтобы узнать о CSS-специфике webkit. Я вижу, что есть много возможностей, выходящих за рамки моего воображения, о том, что такое логика таблиц стилей ... –

Сетчатые дисплеи Retina: Можно ли получить границу 1px через CSS?

ответ

Смежные вопросы