[B! retina] ama-chのブックマーク

Webサイト＆WebアプリのRetina対応方法まとめ

こんにちは。会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。目次 imgタグ CSS JavaScript Google Map

ama-ch 2013/01/31

retina

リンク

Easy retina-ready images using SCSS

If you’re interested in adding retina image support to your website or app and you happen to be using SCSS, here’s a handy shortcut that makes it dead simple. Just include this SCSS mixin in any rule and specify the high resolution image’s path and device independent pixel dimensions. Here’s an example: div.logo { background: url("logo.png") no-repeat; @include image-2x("logo2x.png", 100px, 25px);

ama-ch 2012/10/23

sass
retina

リンク

Towards A Retina Web — Smashing Magazine

Reda Lemeden covers some basic notions that are key to understanding the challenges and constraints of designing for multiple display densities, and invites Web designers and developers to offer a pleasurable viewing user experience regardless of the display they are using. With the recent announcement and release of the Retina Macbook Pro, Apple has brought double-density screens to all of the pr

ama-ch 2012/08/23

retina

リンク

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