GHWEB06.GRASSHOPPER

BLOG

WEBの高精細化ディスプレイ対応

  • Category：Web関連 ／
  • Web関連の備忘録

displayディスプレイの高精細化が進んでいますので対応方法について検討してみました。

CSSでの対応

-webkit-device-pixel-ratio を使用

devicePixelRatio が1の場合、img1.pngが表示。
devicePixelRatio が2の場合、img2.pngが表示。

/* 通常の場合 */
#test {
	height:200px;
	width:200px;
	background:url(img1.png); 
}
/* devicePixelRatioが2の場合 */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) {
#test {
	background-size: 200px 200px;
	-webkit-background-size: 200px 200px;
	background:url(img2.png); }
}

CSS4のimage-setを使う場合

devicePixelRatio が1の場合、img1x.pngが表示。
devicePixelRatio が2の場合、img2x.pngが表示。
こっちの方がスッキリしていますが、使用できるブラウザが限られます。

#test　{
	background:black;
	background:-webkit-image-set( url(img1x.png)  1x, url(img2x.png) 2x );
	width:200px;
	height:200px;
}

jQueryでの対応

devicePixelRatio が1より大きい場合、
replace を使用して画像の拡張子の前に@2xを追加します。

$(function(){
var pixelRatio = window.devicePixelRatio;
if (pixelRatio > 1) {
$('img').each(function() {
$(this).attr('src', $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/,"$1@2x$2"));
});
}
});

思うに

将来的には、こんな事をしなくても良くなると思いますが、暫くは対応が必要ですね
RELATED ARTICLE
  • 掲載: