iPhone 6 Screens Demystified | PaintCode
Few days ago, Apple introduced iPhone 6 Plus. The new iPhone substantially changes the way graphics are rendered on screen. We've made an infographic to demystify this. 320 × 480 375 × 667 414 × 736 320 × 480 750 × 1334 1242 × 2208 1080 × 1920 3.5″ 4.7″ 5.5″ iPhone 6 Plus has screen with lower pixel resolution than the image rendered in previous step. Before the image can be displayed on the scree
非RetinaディスプレイのMacをRetina化する方法｜Mac - 週刊アスキー
『QuickRes』 バージョン：3.0 価格：無料 （バージョンと価格は記事作成時のものです） Joshua Cohenzadeh／(c)2013 ThnkDev 無料版 有料版（HiDPIモードを利用可能） みなさん、こんばんは。マックピープル元・編集長の吉田でございます。今回紹介するアプリは『QuickRes』。メニューバーからモニターの解像度を変更できるユーティリティーです。無料版では、Retinaディスプレイ搭載マシンで本来の解像度（ドットバイドット）を表示可能になります。つまり、13インチのRetinaモデルでは2560×1600ドット、15インチのRetinaモデルでは2880×1800ドットでの表示が可能になります。 起動すると、メニューバーにモニターのアイコンが表示されます。これを右クリックしてみましょう（右ですよ、右）。すると、解像度を変更するメニューが表示されます。1
約1万円で10インチのRetina(2048x1536)なサブディスプレイを手に入れる
約1万円で10インチのRetina(2048x1536)なサブディスプレイを手に入れる 割と以前からそんなにサイズは大きくなくてよいけど解像度はそれなりに高いサブディスプレイが作業用に欲しいなぁと思っていました。用途としては、動画再生だったりTwitter,Facebook,LINE,ChatWorkみたいな立ち上げてるけど常に視界に無くてよいウインドウをそっちに追い出しておくのがメインな感じ。クラムシェルモードにしてしまってデュアルディスプレイというのもやってみたりしたんだけど、やっぱ思った以上に物理的に場所取るんですよね。基本的にはMacBook Pro 15”のディスプレイで作業しつつ、一部拡張としてサブディスプレイがきっと良いよなぁ、と。 とはいえ、こういう需要は極めて少ないのか、解像度の高さをそれなりに求めるとサイズ（インチ）が大きくなるか、値段がかなり高くなるかというところで、
WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
WebサイトのRetina対応は必要か？
アップルのWebサイトにRetina対応のiPadでアクセスすると、一昔前のWebサイト（インターレースGIF）のように、ボケた画像がジワっとシャープに切り替わります。通常の画像を表示した後で、Retinaディスプレイの場合には解像度が高い画像へ切り替えているのです。 それぞれの画像について、低解像度版と高解像度版の2種類を読み込むことになるので、転送データ量が増えてサイトの表示が遅くなってしまいますが、アップルは自社商品のイチオシ機能であるRetinaディスプレイでの表示の美しさを優先させたのでしょう。 このような画像切り替えは、「retina.js」や「retina-replace.js」などのJavaScriptライブラリーを使うと比較的簡単に実装できますが、すでに掲載している画像の高解像度版を用意したり（素材が残っていない場合は作り直しになる）、今後掲載する新しい画像を通常版と高解
【Objective-C】iPhone5（4インチ）のサイズ判別など、画面サイズの取得にはUIScreenが便利 - しすぜろ
今までiPad未対応のアプリのみを作っていたので、あまり縁のなかった、解像度にあわせた表示内容の変更。ただ、iPhone 5が発売され、新解像度である4インチの出現によってそうは言っていられなくなりました。 これから出る4インチのiPod touchにも備え、ディスプレイのサイズを判別する方法を調べてみると、UIScreenクラスの使い方がとっても簡単で、便利そうです。 使い方は簡単でUIScreen > mainScreen > bounds の size で、スクリーンのサイズを引っ張ってきます。4インチだと320x568になるので、そこで判別します。ユニバーサルアプリではなければ、それ以外を3.5インチとしておけば良いでしょう。 参考: UIScreen Class Reference CGSize screenSize = [[UIScreen mainScreen] bounds
スマートフォン向けWebサイトの表示速度 高速化手法
対象読者 スマートフォンWebサービス開発者 特に、フロントエンド周りの開発に従事する方 スマートフォン向けWebサイト高速化のテクニック スマートフォンはOS／デバイスの進化が激しく、要求される最適化の内容も半年で別物になることがあります。そのため最適化に際しては、案件ごとの状況や目的、デバイス／OSのシェアに応じて、まずターゲット端末を選定し、問題の検出を行います。 この記事では「iPhone 4＋iOS 5」を想定して話を進めます。実際に「iPhone 4＋iOS 5」はよく現場でも最も動作が重い組み合わせとしてターゲット端末に挙がります。これはiPhone 4がRetinaディスプレイを採用したことで960×460ピクセルの高解像度を備えながら、CPUなどのデバイス性能が潤沢とはいえず、ボトルネックが生まれやすいためです。iOS 4ではなくiOS 5をターゲット端末として扱うのは、
jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
[Javascript] Retina.js - Retinaディスプレイデバイスからアクセスがあった時、自動で倍の解像度の画像にリプレイスしてくれるJS
[Javascript] Retina.js – Retinaディスプレイデバイスからアクセスがあった時、自動で倍の解像度の画像にリプレイスしてくれるJS Pocket Tweet サイトにRetinaディスプレイデバイスからアクセスがあった際、もし該当イメージに“@2x”がファイル名末尾に付く画像があったら、そっちにリプレイスしてくれるというJS。高解像度版の画像に“@2x”と付けるだけでRetina対応ができるので便利ですね。ちなみにこの“@2x”という命名ルール、iOS Appの制作でも使われるものなので、App制作者の人には馴染みのある文字列です。またLESSでの実装にも対応しているようで、こっちならJSを使わなくてもイイみたい。 Retina.js
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flatis
WebサイトをRetinaディスプレイに対応させる方法