Итак, у меня есть эта веб-страница для смартфонов. В шапке у меня обычный метапорт:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
и обычный css включают в себя:
<link rel="stylesheet" href="default.css" type="text/css" />
со стандартным CSS, как:
.ui-icon-menu{
background-image: url(images/icon-menu-normal.png)!important;
}
Все работает хорошо. Для дисплеев высокой плотности, таких как iPhone 4, он хорошо масштабируется, но я подумал, что смогу сделать его еще лучше, поэтому я добавил CSS для hi-density:
<link rel='stylesheet' href='highdensity.css'
media='only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)' />
В этом CSS я могу переопределить CSS следующим образом:
.ui-icon-menu{
background-image: url(images/icon-menu-normal@2x.png)!important;
background-size: 100%;
}
Очень хорошо работает. Но обратите внимание на background-size: 100%;. Без этого фоновое изображение будет масштабироваться до 200%.
Моя проблема с повторяемыми изображениями? Что я могу сделать их? Я не могу использовать background-size: 100%;, потому что это растянет шаблон вместо его использования.