Вёрстка двух страниц под iPad. Ретина.
Нужно сверстать две страницы в HTML для нашего приложения на iPad.
Страницы простые.
Есть лайтбокс.
Есть скроллинг изображений(подключаем flexslider.woothemes.com/)
Нужно сделать переключатель "офисы продаж"/"представительства". При переключении будет меняться соответствующий блок.
Карту на странице об офисах отображаем ту же что в миниатюре. То есть одно и тоже изображение будет. Просто в миниатюре сжимаем при помощи атрибутов высоты и ширины.
На странице о объекте галерея фотографий. Справа есть ссылка посмотреть на карте. При нажатии на ней, нужно в галерее картинок отобразить первую картинку (первой картинкой будет являться карта).
Нужно помнить что будет использоваться на iPad а там у последних моделей ретина дисплей.
Цитата с хабра:
HTML и CSS-масштабирование
Самый простой способ подготовить графику к Retina-дисплею — это просто разделить пополам физические размеры изображения. Например, чтобы показать фотографию 200x300 пикселей на экране с увеличенной плотностью пикселов, необходимо загрузить фото размером 400x600 пикселей и уменьшить его, используя CSS-аттрибуты или HTML-параметры.