Адаптация верстки под retina

@Alex_student · Регистрация: 10.02.2013

Студворк — интернет-сервис помощи студентам

Доброго времени суток уважаемые форумчане.
Столкнулся с таким вопросом. Необходимо сверстать адаптивный сайт с учетом качественного отображения на экранах с retina.
примеров как адаптировать под это дело изображения, валом и вроде вопросов не возникает. не понимаю одного, почему текст допустим в 32px на экране iphone весьма и весьма здоровы, хотя насколько я понимаю, учитывая двойню плотность пикселя шрифт должен вроде как уменьшиться...а приемлемого результата достигаю только в случае уменьшения шрифта в два раза. Подскажите плиз что не так делаю...
в HTML прописываю метатег:

HTML5
1
meta name="viewport" content="width=device-width, initial-scale=1.0">

в CSS я родительскому элементу придаю базовый размер шрифта

CSS
1
2
3
    html, body {
        font-size: 16px;
    }

а дальнейшие размеры шрифтов задаю в относительных единицах em:

CSS
1
2
3
4
    .text {
        margin-right: 2em;
        margin-left: 2em;
    }

и в итоге на iphon смотрится очень убого( и приходиться мутить след конструкцию:

CSS
1
2
3
4
5
6
7
8
9
10
@@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 568px), 
screen and (-moz-min-device-pixel-ratio: 2) and (max-width: 568px),
 screen and (-ms-min-device-pixel-ratio: 2) and (max-width: 568px),
 screen and (-o-min-device-pixel-ratio: 2) and (max-width: 568px),
 screen and (min-device-pixel-ratio: 2) and (max-width: 568px) {
html, body {
        font-size: 8px;
    }
и далее уменьшаю все размеры в 2 раза, что в px, но как я понимаю такого быть не должно:(
}

и вроде смотрится норм...подогнал проверил..но проблема в том что мне еще надо и сверстать под ipad, а вот его у меня нету и черт его знает как правильно сверстать(..в наличии только ipad2 без ретины(
т.е. я как понимаю все надо вручную перебивать..и что размер в 70px на обычном устройстве таким же огромным почему то остается и на устройствах с retina

(проверял, создал блок в 640px и на iphone 5 (разрешение 640 на 960, создал мне горизонтальную прокрутку в два экрана)

@Alex_student · 02.04.2015, 09:02 **[ТС]**

так вроде ж везде и используются относительные величины...кроме блока body...
а делаю чего так..на форумах примеры видел и в книге какой-то, вот и иду по такому пути. вопрос насколько он верен, сказать не могу(

@Fedor92 · 02.04.2015, 10:32

Не по теме:

Окей... Вопросов больше нет...:)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Alex_student 18 / 18 / 8 Регистрация: 10.02.2013 Сообщений: 250
	02.04.2015, 09:02 [ТС]
	так вроде ж везде и используются относительные величины...кроме блока body... а делаю чего так..на форумах примеры видел и в книге какой-то, вот и иду по такому пути. вопрос насколько он верен, сказать не могу( 0

@Fedor92
	02.04.2015, 10:32
	Не по теме: Окей... Вопросов больше нет...:) 0