Обработка размера изображения на дисплее нескольких устройств в приложении cordova-ionic-angular

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

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

Apple = retina и non-retina Android = ldpi, mdpi, hdpi, xhdpi, xxhdpi и планшеты (все это с несколькими разрешениями экрана) BlackBerry10 = одно разрешение (но не равное другим) WindowsPhone8 = одно разрешение (но не равное другим)

В этом случае, как лучше всего?

  1. Использовать изображения SVG (оптимизация, производительность, размер приложения) ??

  2. Выделите теги CSS для соотношения пикселей устройства (замена изображения CSS) (дизайнер может меня убить :smile: lol ) см. список http://bjango.com/articles/min-device-pixel-ratio/

  3. Таблица спрайтов CSS

  4. Другой путь

Прежде чем принимать решение, подумайте, что лучше всего применить во всех устройствах.

заранее спасибо


cordova ionic-framework image screen angularjs
person Brujodedor    schedule 18.06.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

На самом деле не существует единого способа сделать это, поскольку для каждой реализации образа потребуется свой подход в зависимости от его назначения. SVG — это здорово, но не все работает как SVG.

Медиа-запросы станут вашим союзником.

См. это: поддержка нескольких разрешений и плотности изображений в phonegap

и это для альтернативного подхода: фон привязки данных Angular.js изображения с использованием медиа-запросов

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

См.: https://github.com/scottjehl/picturefill

... и его реализация директивы angularjs https://github.com/tinacious/angular-picturefill

person jnsnvt    schedule 18.06.2014
comment
Что вы думаете об использовании изображения с высоким разрешением, которое поддерживается в более крупных устройствах, например: Samsung S5 или Nexus 5, а браузер делает волшебство? - person Brujodedor; 19.06.2014
comment
Масштабирование большого изображения в браузере не идеально, но в крайнем случае работает. - person jnsnvt; 20.06.2014