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

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

8 голосов
/ 12 октября 2011

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

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

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

Что люди сделали для обслуживания дисплеев без Retina и Retina при минимизации дублирования кода?

Спасибо!

Ответы [ 2 ]

17 голосов
/ 12 октября 2011

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

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

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

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

.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">

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

6 голосов
/ 12 октября 2011

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

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

  1. искать все <img /> и заменить src атрибут.
  2. искать все CSS и заменить background-image.
  3. если вы используете canvas, создайте 2-кратную плотность и используйте 2-кратные изображения.Это означает, что при работе с элементом 100px * 100px <canvas></canvas> установите его содержимое равным 200px * 200px.
...