1
スマートフォン用のこのウェブページがあります。ヘッダでは、私はいつものメタビューポートを持っている：高密度繰り返し可能な背景
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
と通常のCSSが含まれます：標準のCSSと
<link rel="stylesheet" href="default.css" type="text/css" />
が好き：
.ui-icon-menu{
background-image: url(images/icon-menu-normal.png)!important;
}
すべてがうまく動作します。 iPhone 4のような高密度ディスプレイにとっては、うまくスケールが、私はそれがより良いので、私はHI-密度のCSS含ま見えるようにすることができます考えた：
<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/[email protected])!important;
background-size: 100%;
}
非常にうまく動作します。しかし、background-size: 100%;に気づく。それがなければ、背景画像は200％に拡大されます。
私の問題は繰り返し可能な画像ですか？私は何をすることができますか？私はbackground-size: 100%;を使用することはできません。パターンを使用する代わりにパターンを引き伸ばすためです。