JavaScript Archive

アプリのサポートサイトを作って、Retina対応が気になったので調べました。
今回作ったサイトはこんな感じ
hiranodept apps

以前はCSSで切り替えをやっていたのですが、JSの方が楽ですね。
img要素をとってきて、Retinaの場合はプレフィックス(@2x)を付けるのが簡単かなと思いました。

以下が元ネタです。
Retinaディスプレイ時に読み込む画像を切り替えるjQueryその2

<img src="images/grey.png" data-original="images/logo.png" alt="" width="50" height="50" />

srcにはダミー画像のパスを入れておきます。
data-originalに画像のパスを入れておきます。
こうすることで、無駄な画像を読み込まなくて済むようです。

$(function(){
	$('img').each(function(){
		var src = $(this).attr('data-original');
		if(window.devicePixelRatio === 2) {
			$(this).attr('data-original', src.replace(/(\.jpg|\.png)/gi,'@2x$1'));
		} 
		$(this).attr('src', $(this).data('original'));
	});
});

※ちなみに、Androidではwindow.devicePixelRatioが1.5のものがあるようです。

また、端末を横(landscape）に回転した際、viewportにmaximum-scale=1.0を設定を入れておかないと、表示が崩れてしまいます。

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

その他、参考にしたサイト
スマートフォン向けサイトの作り方

【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】

※追記：3/9 プレフィックスの「ク」が抜けてましたw
ついでなので、他言語化について。
閲覧する端末の言語の取得ですが、navigator.language で取れます。
ですので、ベースを日本語以外の言語サイトだとして、
日本語の場合はリダイレクトするには以下のコードになります。

var lang = navigator.language;

	if(lang == "ja-jp"){

		location.href = 日本語サイトのurl;

	}