CSS фоновые изображения размыты на мобильном устройстве

Question

установки:

<meta name="viewport" content="width=device-width, 
         initial-scale=1, maximum-scale=1.0, user-scalable=no"/> 

Я создал 480 точек на дюйм спрайт с помощью кнопок. Его размеры составляют около 2000px * 1000px. В эмуляторе с размером пикселя css, равным 320 dpi, css-изображения выглядят отлично.

.button-logo { 
    background: url(../assets/img/sprite_480.png) no-repeat !important; 
    background-position: -4px -139px !important; 
    background-size: 790% !important; 
} 

Однако, когда я тестирую их на реальном устройстве с разрешением 320 точек на дюйм, изображения размыты. Любая идея, почему изображения становятся размытыми на устройстве?

Когда я добавляю

target-densitydpi=device-dpi 

в мета-тег проблема решена на устройстве, однако цель-densitydpi была удалена из WebKit, см http://trac.webkit.org/changeset/119527 Так что я не могу использовать его.

Любые идеи, как решить эту проблему? Я создаю приложение с телефонной связью для android

Answer 1

Это может помочь при создании изображений для HD-дисплеев, таких как отображение сетчатки на iPhone, DPI на самом деле не проблема. Это больше о размере изображения. Если ваша кнопка будет отображаться как 50x50 пикселей, тогда созданное изображение должно быть 100x100 пикселей. Затем в вашем CSS установите размер фона: 50 пикселей;

Это должно быть соотношение 2x, чтобы оно отображало кристально чистое изображение.