Home > JavaScript Archive

JavaScript Archive

iPhone用サイトの画像 Retina対応、回転対応

アプリのサポートサイトを作って、Retina対応が気になったので調べました。
今回作ったサイトはこんな感じ
hiranodept apps
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;
}


Index of all entries

Home > JavaScript Archive

Profile

iPhone/iPad開発 web制作:平野百貨店
iPhone/iPad開発・web制作・映像制作をしている平野百貨店の店長個人の覚書です。
ご意見・ご感想などお問合せはコチラからどうぞ。

※最近ツッコミをもらうので一応書いておきます。ブログのタイトル「袖触れ合うも多少の縁」はわざとです。正確には「袖振り合うも多生の縁」が正解です。

Search
iPhone Apps






RSS
リンク
のこぎりそうの日記

Return to page top