iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 - Qiita
用語解説 ポイント boundsやframe等で使用される論理的な画面サイズ。通常はこれを意識してプログラムを作成します。 ピクセル 描画が行われる論理的な画面サイズ。ピクセルパーフェクトな描画が必要な場合には、このグリッドに合うように描画を行う必要があります。 デバイス 端末に搭載された液晶の物理的なピクセル数。これが上記ピクセル数と一致しない場合には、ピクセルパーフェクトの描画は非常に難しくなります。 このサイトの解説がわかりやすいです。 https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 拡大モード iPhone6, 6 Plusでは、画面設定から拡大モードが選択できます。 上記の表にまとめた通り、retinaの倍率はそのままで、ワンサイズ小さいiPhone相当のポイント数になります。 iPho
CSS WG Blog – How to unprefix -webkit-device-pixel-ratio
This is a page from the Cascading Style Sheets Working Group Blog. Some other places to find information are the “current work” page, the www-style mailing list, the Future of CSS syndicator, and the issue list on Github. Do you want to know how the CSS WG works? Fantasai has written about:csswg, An Inside View of the CSS Working Group at W3C. Once upon a time, Webkit decided a media query for the
いまさら聞けないRetina対応のための「ピクセル」の話
ピクセル密度とピクセル比の関係 ピクセル密度は、数が多ければ多いほどスクリーン上で鮮明な描画ができるわけですが、上述したピクセル比とは直接関連しないものです（と考えています）。たとえば、Galaxy S IVのようにピクセル密度は441ppi、ピクセル比は2という端末もあれば、HTC Oneのように、ピクセル密度は468ppiだが、ピクセル比は3という端末もあります。 ※両方とも実機で検証したわけではないので、Wikipediaの情報が正しければの話ですが。 ※ピクセル比とは違うものですが、それと似た単位であるdppx (dots per pixel unit)では、CSSで定義された1インチが96pxになるため、1dppx = 96dpiになります。 ピクセル比に似た値「dp」とwindow.devicePixelRatio Androidの密度非依存ピクセル「dp」 Density-i
Retina 5k iMac(Late 2014) が届いたので、環境構築メモ
10 月末に発注した Retina 5k iMac(Late 2014)が、約一ヶ月待って、到着しました。 早速、日頃の開発に使えるようにセットアップしましたので、そのメモです。 0. セットアップ セットアップは、旧 iMac からの移行は行わず、クリーンインストールの状態から行っていきます。 1. OSX 環境設定 セキュリティとプライバシー FileVault で暗号化 ファイアウォールを入にする Dock 画面上の位置を「左」に 「Dock を自動的に隠す／表示」にチェック Spotlight 「21. Bing Web 検索」のチェックを外す キーボード 「キーボード」タブ 「キーのリピート」を右端（速い）に 「リピート入力認識」までの時間を右端（短い）に 「F1, F2 などのすべてのキーを標準のファンクションキーとして使用」にチェック 「修飾キー」をクリック Caps Loc
レスポンシブ・イメージがもうすぐネイティブ実装！いまから使える？ポリフィル「Picturefill 2.x」を検証
レスポンシブ・イメージがもうすぐネイティブ実装！いまから使える？ポリフィル「Picturefill 2.x」を検証 レスポンシブ・デザインの画像の扱いの課題を解決するのが「レスポンシブ・イメージ」です。この「レスポンシブ・イメージ」には紆余曲折あったわけですが、熱心な開発者の方々のおかげでようやく仕様がまとまり、ブラウザでのネイティブ実装も進んでいます。 結論から言うと、ブラウザのネイティブ実装はまだこれからですし、ポリフィルのPicturefill 2.xには大きな欠陥があり、プロダクションサイトでの使用は待ったほうが良いと思います。しかし、多くの開発者が多大な時間を費やして実現しようとしているレスポンシブ・イメージです。この存在が日本でもより多くの人に広まればと思い、いまの状況をまとめてみました。 目次 レスポンシブ・イメージのいま レスポンシブ・イメージで解決できる3つの課題 Pic
Eclipse/AptanaをRetina対応させる方法 - tswi's dev
プロパティリスト(.plist)に以下のパラメータを追加すればいい。 <key>NSHighResolutionCapable</key> <true/> Retina対応させていない状態だと、Eclipse.app(ないしAptanaStudio3.app)の情報は以下のようになっている。 "低解像度で開く"にチェックがあり、解除できない。 .appを右クリックし、"パッケージの内容を表示"を選択。 contents/Info.plistをテキストエディタで開き、冒頭に記載したパラメータを下記のように追加する。 (前略) <string>-keyring</string><string>~/.eclipse_keyring</string> <string>-showlocation</string> <!-- WARNING: If you try to add a single VM
スマホ向けのビューポートとメディアクエリーまわりのメモ | もしもワークス
スマートフォン用のメディアクエリー（Media Queries）の指定を調べたときのまとめです。 まずはお約束。 <meta name="viewport" content="width=device-width,initial-scale=1.0" /> device-widthを指定して、ビューポート（仮想の画面領域）の幅と実際の画面幅を一致させます。 iPhoneの場合、3GSまでならここは320pxを指定するのと同じ。iPhone 4以降ならRetinaなのでデバイス幅と言うなら本来は640pxになるところですが、互換性を取ってこれも320px。つまり width=320 でもいいってことですかね。 次はメディアクエリーの記述。 @media only screen and (-webkit-min-device-pixel-ratio: 2) { /* iPhone Retin
RetinaサポートWebへの第一歩 – Taiyo Fujii, writer
iPhone 4、iPad 3でスクリーンを改革したAppleが平然とデスクトップにも切り込んできた。 MacBook Pro Retina のことだが、一度触るともう戻りたくなくなるほど美しい（個人的には MacBook Air を買ってしまったんだけど）。そんな美しいスクリーンの価値を落とすのがWebサイトだ。画像の解像度を間違ってしまったかのような見栄えになってしまう。 まず、一番簡単なあたりから。WordPressを使っているなら、Retina for WPを使えばエントリーにアップロードするメディアに限っては簡単に Retina 対応できる。昨日アップロードしたエントリーで使っているが、 window.devicePixelRatio をJavascriptで判定して cookie を喰わせ、読み込む画像を判定している。 [retina normal=”http://blog.t
[css,js] Retinaディスプレイ対策
スマートフォンのRetinaディスプレイだとPCでくっきり見えてる画像がぼやけてしまう件。 500px × 300pxの画像をRetinaディスプレイでくっきりさせたいなら 1000px × 600pxの画像を作成してサイズを50%に指定すれば良い。 その方法を以下に列挙する。 基本 Retinaディスプレイはdevice-pixel-ratioという値が1.5ないし2なので CSSなりJSなりでその値を判別して振り分ける CSS3 Meia Queries Androidで未対応機種があるため、上書きで使う方が無難。 @media only screen and (-webkit-min-device-pixel-ratio: 1) { } @media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-de
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
<resolution> - CSS: カスケーディングスタイルシート | MDN
RetinaディスプレイでHiDPIモードが使える解像度切替アプリ『QuickRes』 | ライフハッカー・ジャパン