Как предотвратить масштабирование изображений на мобильных устройствах?

Question

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

Идея состоит в том, что я хочу предотвратить фильтрацию биллинара на моих изображениях. На рабочем столе это просто, просто отобразите изображение на 1x, и оно выглядит идеально.

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

Вот моя тестовая страница: http://stage.samkeddy.com/test/

Вы можете видеть, что все, кроме второго один совершенно четкий.

Но вот как это выглядит на моем телефоне: http://imgur.com/a/4rMKj

Это даже не близко к правильному размеру. Изображение должно быть 70 пикселей в ширину, но оно выходит либо на 53, либо на 63 пиксела в ширину (один загружается на страницу, второй - после двойного нажатия).

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

Answer 1

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

Предлагаю использовать некоторый отзывчивый дизайн, использовать параметр min-width для тега img, а изображение с серверной стороны должно быть достаточно большим, чтобы предотвратить размытие.

Есть также некоторые услуги изображения, которые обеспечивают функцию масштабирования, вы можете добавить? W = 100 & h = 100 to thre URL изображения для сжатия большой картинки на маленькую.