Наша цель - подражать тому, что разработчики могут делать с собственными приложениями для iOS: то есть использовать единый макет, основанный на единицах измерения, для дисплеев Retina (640x960) и дисплеев без Retina (320x480).
Все, что нужно сделать разработчикам iOS, - это предоставить два набора ресурсов, один для Retina и один для не-Retina, и разработать их макеты в относительных единицах, называемых единицами измерения. При условии, что разработчики следуют определенному соглашению об именах, iOS автоматически определяет размер экрана пользователя, использует правильные ресурсы и соответствующим образом масштабирует макет.
Это означает, что разработчики могут обслуживать две базы пользователей с одной базой кода.
Существуют ли фреймворки, помогающие разработчикам HTML5 делать то же самое?
Что сделали люди, чтобы обслуживать дисплеи не Retina и Retina, сводя к минимуму дублирование кода?
Спасибо!
Ответ 1 · рейтинг 17 · Brian Nickel♦
Есть две простые вещи, которые вы можете сделать, чтобы ваши страницы работали в обоих режимах.
Во-первых, вы устанавливаете область просмотра с помощью метатега в заголовке документа. Это даст вам ширину страницы 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">
Вероятно, вы могли бы проделать больше работы, чтобы проверить фактический размер экрана и показать изображения меньшего размера для пользователей, не использующих сетчатку, но я не думаю, что польза будет столь существенной.
Ответ 2 · рейтинг 6 · Cat Chen
Каждая единица, которую вы используете на дисплее Retina, остается прежней, поэтому все, что вам нужно сделать, это заменить все изображения версией 2x.
Вы можете использовать window.devicePixelRatio, чтобы определить, работает ли ваше веб-приложение на дисплее Retina. Если window.devicePixelRatio > 1, то это дисплей Retina. Затем вы можете заменить каждое изображение на стороне клиента:
- искать все
<img /> и заменить атрибут src.
- искать все css и заменить
background-image.
- если вы используете
canvas, создайте 2-кратную плотность и используйте 2-кратные изображения. Это означает, что при работе с элементом 100px * 100px <canvas></canvas> установите его содержимое равным 200px * 200px.
