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
スマホ向けのビューポートとメディアクエリーまわりのメモ | もしもワークス
スマートフォン用のメディアクエリー（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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
