улучшение качества изображения для iphone 4 с 72ppi до 326ppi

Question

Я пытался понять, как улучшить качество кнопок моего мобильного дизайна.Мои навигационные кнопки в настоящее время являются png-спрайтом с разрешением 72ppi, тогда у меня есть копия этих кнопок с разрешением 326 ppi.Я читал, что iphone4 может автоматически подобрать изображение 326ppi, добавив @ x2 к текущему спрайту навигации?В настоящий момент я просто немного запутался в процессе и в том, как мой текущий спрайт навигации 194x343px @ 72ppi может превратиться в изображение 335x1469px @ 326ppi?

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

Кайл

Answer 1

Если размеры вашей кнопки на обычном дисплее составляют 194x343px, тогда включите файл с названием button.png такого размера в ваш проект и создайте ссылку на него в Интерфейсном Разработчике - тогда вам также нужно изображение с размерами 388x686px (удвоить размер) и с именем файла button@2x.png в вашем проекте. Ваше приложение будет автоматически использовать это изображение с более высоким разрешением при работе на сетчатке.

Answer 2

Исходя из того, что я смог собрать, вы можете создать таблицу стилей переопределения, ориентированную на iPhone 4, используя эту технику . Вам нужен запрос @media, и все готово.

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 4 styles */
}

Или, если вы хотите сделать ссылку на внешнюю таблицу стилей, используйте:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />