jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
[JS]デスクトップはそのまま、新しいiPad, iPhone4には高解像度の画像を配置するスクリプト -jQuery Retina
Retinaディスプレイを採用している新しいiPad, iPhone4用にimg要素で配置した画像を高解像度のものに変更するjQueryのプラグインを紹介します。 jQuery Retina Plugin jQuery Retina -GitHub [ad#ad-2] jQuery Retinaのデモ jQuery Retinaの使い方 jQuery Retinaのデモ jQuery Retinaを使って画像を配置する方法は大きく分けて、3つあります。 imgタグに「data-retina」属性を加える。 画像のファイル名に「-2x」を加える。 コールバック関数を使ってファイル名を指定する。 表示はどの方法を使っても一緒ですが、下記にそれぞれの方法で実装したデモがあります。 デモページ [ad#ad-2] jQuery Retinaの使い方 jQuery Retinaの使い方は簡単です。
タップやピンチなど、タッチデバイス特有のイベントをサポートする2KBの軽量jQueryプラグイン・Hammer.js
タップ、ダブルタップ、ピンチや 長押しなど、タッチデバイス特有 のイベントをサポートしてくれる JSライブラリ・Hammer.jsのご紹介。 2KBと軽量なのでいつか使うと思っ て記事にしておきます。 jQuery依存みたいです。 ある世代にはなつかしいと思う方がモデルとして登場してます。 サポートしてるイベントはタップ、ダブルタップ、ピンチ、ドラッグ、長押しの5イベント。 動作テストはiPadでのiOS5、iPhone4でのiOS5、Samsung Galaxy SのAndroid 2.3.3とGoogle Chrome 17だそうです。僕は3GSなんですが、一応動いてました。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></
[JS]広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js
テーマ左上から、base、sunny、le-frog、ui-darkness 対応ブラウザは、下記の通りです。 iPadも対応というのはいいですね。 Chrome/Chromium Safari Firefox IE Opera iPad impress.jsからの移行 jmpress.jsは「impress.js」のjQuery版で、impress.jsの特徴全てと更に多くの機能を備えています。 impress.jsから移行するには、jquery.jsを加え、スクリプトをimpress.jsからjmress.jsにし、スクリプトの呼び出しを「$(selector).jmpress(); 」に変更します。 impressのデモをjmpress.jsで動かしたデモ jmpress.jsの使い方 HTML ルートとなるdiv要素に「id="jmpress"」をつけ、各コンテンツをdiv要素で配
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
