Нацеливаясь на iphone4 с отзывчивым дизайном (css-медиа-запросы), как если бы нижний res

Об этом, должно быть, ответили раньше, но я не могу найти связанный с ним вопрос.

Я разработал отзывчивый сайт, с запросами на мультимедийные запросы css, чтобы правильно отображать на 320 широкоформатном.

Хочу, чтобы я хотел iPhone4 (640 x 960), когда в портретном режиме (640 в ширину), чтобы соответствовать медиа-запросам, как если бы он отображал ширину = 320 пикселей вместо этого. Обоснование: несмотря на то, что у iphone больше пикселей, я хочу отобразить упрощенную раскладку для этого пользователя, аналогичную пользователям телефонов с не высокой плотностью.

Любой способ сделать это, указав, например, некоторый метатег для этих телефонов с высокой пиковой плотностью?

Конечно, я мог бы определить отдельные медиа-запросы для iphone 4 и т.д. с помощью min-device-pixel-ratio: 2, но это приводит к отдельным запросам на css-media (один для низкого и один для высокой плотности пикселей), которые по существу имеют ту же логику, которые мне кажется не очень сухим (http://en.wikipedia.org/wiki/Don%27t_repeat_yourself)

Странно: новый Ipad 3, с плотностью пикселей 2, правильно отображают то, что я хочу, т.е. он имитирует (по крайней мере, как запросы в css-медиа) устройство с половиной разрешения.

Ответ 1

iPhone 4 (и 4S) ответит на этот метатег:

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

Это часть "начального масштаба", за которой вы находитесь. Это заставит устройство с высоким разрешением действовать как 320px в ширину (или 480 в ландшафте).

Есть другие ошибки вокруг ландшафтной ориентации, о которых вы должны знать.

Кроме того, имейте в виду, что имеется доступный параметр ориентации для медиа-запросов:

@media screen and (orientation:landscape) {
/* Landscape styles */
}

Ответ 2

Во-первых: я думаю, что в вашем вопросе есть опечатка - на дисплее 640x960, 640 wide - режим portait, а не ландшафт. Портрет вертикальный, пейзаж горизонтальный.

Тем не менее, если я правильно читаю ваш вопрос, вы спрашиваете, как настроить таргетинг на сетчатый экран iphone, используя медиа-запросы для ширины.

Ответ заключается в том, что вы не можете - и дисплей сетчатки iphone, и дисплей без сетчатки сообщают обозревателю как 320x240. Различие, как вы отметили, состоит в том, что дисплей сетчатки имеет плотность в 2 пикселя, на которую вы можете настроить медиа-запросы:

.avatar {
    display: block;
    width: 50px;
    height: 50px;
    background: url("50x50-avatar.png");
}
@media only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) {
  .avatar {
    background: url("100x100-avatar.png");
    background-size: 50px 50px;
  }
}

Этот пример предназначен для отображения изображений с высоким разрешением на сетчатых дисплеях, но вы можете использовать те же методы для настройки макета для дисплеев сетчатки.

Итак, вкратце, сначала напишите свои стили для не-сетчатых дисплеев, а затем добавьте переопределение отображения сетчатки с помощью медиа-запросов, что должно избежать проблем с DRY.

Дальнейшее чтение: