Обслуживание дисплеев не-Retina и Retina с помощью одной кодовой базы: фреймворк для масштабирования макетов и ресурсов для приложений HTML5 на устройствах iPhone или iOS?

Наша цель — подражать тому, что разработчики могут делать с собственными приложениями для iOS: то есть использовать единый макет, основанный на единицах измерения, для дисплеев Retina (640x960) и дисплеев без Retina (320x480).

Все, что нужно сделать разработчикам iOS, — это предоставить два набора ресурсов, один для Retina и один для не-Retina, и разработать их макеты в относительных единицах, называемых единицами измерения. При условии, что разработчики следуют определенному соглашению об именах, iOS автоматически определяет размер экрана пользователя, использует правильные ресурсы и соответствующим образом масштабирует макет.

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

Существуют ли фреймворки, помогающие разработчикам HTML5 делать то же самое?

Что сделали люди, чтобы обслуживать дисплеи не Retina и Retina, сводя к минимуму дублирование кода?

Спасибо!


ios iphone cordova html jquery-mobile
person Crashalot    schedule 11.10.2011    source источник

Ответы (2)


arrow_upward
17
arrow_downward

Есть две простые вещи, которые вы можете сделать, чтобы ваши страницы работали в обоих режимах.

Во-первых, вы устанавливаете область просмотра с помощью метатега в заголовке документа. Это даст вам ширину страницы 480 в альбомной ориентации и 320 в книжной. Вы можете проверить, в какой ориентации вы находитесь, используя медиа-запросы CSS.

<meta name="viewport" content="width=device-width; initial-scale=1, maximum-scale=1">

Во-вторых, подавайте изображения Retina для всех ваших изображений, используя свойство CSS background-size. Поскольку ширина вашей виртуальной страницы составляет 320 пикселей, каждый пиксель действительно имеет размер 2 на 2 пикселя на дисплее сетчатки. Если вы подадите изображение 40x40 в поле 20x20, дисплеи Retina отобразят его как есть, а дисплеи без Retina уменьшат пиксели.

.my-button {
    width:  20px;
    height: 20px;
    background-image: url(retina-images/my-button-40x40.png);
    -webkit-background-size: 20px 20px;
    background-size: 20px 20px;
}

Это также должно работать, если вы используете тег изображения:

<img src="retina-images/my-button-40x40.png" width="20" height="20">

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

person Brian Nickel♦    schedule 11.10.2011
comment
Спасибо, Брайан! А макеты? Должны ли мы использовать единицы CSS em для расстояния между элементами вместо процентов? - person Crashalot; 12.10.2011
comment
Это во многом зависит от того, что вы пытаетесь сделать. Если у вас есть два элемента рядом друг с другом, каждый из которых занимает 48% экрана, зазор будет увеличиваться, когда вы поворачиваете телефон в альбомную ориентацию. Я бы порекомендовал, чтобы они занимали по 50% каждый, а затем дополняли их em или px или чем-то еще. С окном просмотра вы в значительной степени гарантируете, что 1px будет одинакового размера на всех устройствах, поэтому вам не нужно так сильно беспокоиться о размерах относительно размера шрифта, как на других платформах. - person Brian Nickel♦; 12.10.2011
comment
Следует иметь в виду, что на некоторых (Android) устройствах 50% + 50% > 100% или даже 33% * 3 > 100%. Часто люди размещают элементы div рядом друг с другом, используя display:inline-block, который представляет собой непрерывную компоновку, которая на этих устройствах переносится на следующую строку. Я всегда рекомендую использовать абсолютное позиционирование или display:table-cell для такого построения макета. - person Brian Nickel♦; 12.10.2011

arrow_upward
6
arrow_downward

Каждая единица, которую вы используете на дисплее Retina, остается прежней, поэтому все, что вам нужно сделать, это заменить все изображения версией 2x.

Вы можете использовать window.devicePixelRatio, чтобы определить, работает ли ваше веб-приложение на дисплее Retina. Если window.devicePixelRatio > 1, то это дисплей Retina. Затем вы можете заменить каждое изображение на стороне клиента:

  1. искать все <img /> и заменить атрибут src.
  2. искать все css и заменить background-image.
  3. если вы используете canvas, создайте 2-кратную плотность и используйте 2-кратные изображения. Это означает, что при работе с элементом 100px * 100px <canvas></canvas> установите его содержимое равным 200px * 200px.
person Cat Chen    schedule 12.10.2011
comment
если вы используете медиа-запросы, вам не нужно заменять, вы можете просто сделать специальную настройку, которая определяет dpi, а затем переопределяет фон. - person BerggreenDK; 24.01.2013
comment
Да, и это относится к CSS. Вам по-прежнему нужно покрывать изображения без CSS с помощью JavaScript. Я надеюсь, что есть новый стандарт, охватывающий это. - person Cat Chen; 25.01.2013
comment
нет, я имею в виду, вы можете создать медиа-запрос pr. тип разрешения, чтобы включить правильные изображения для указанного разрешения. - person BerggreenDK; 27.01.2013