本当は怖い HTML5 Canvas の Retina対応 - Qiita
<canvas id="sample_canvas" width="640" height="800" style="width: 320px; height: 400px"></canvas> これで、Retinaディスプレイできれいに表示できる。 しかし、このままでは以下のような問題が起きちゃう。 2倍のサイズのCanvasに描画を行うため、処理が重くなる そのため 一部のAndroid端末にて、ブラウザが落ちる、端末が発熱する 一部のAndroid端末にて、Canvas要素のstyle属性を動的に変更するとブラウザが落ちる そこで、Retina以外の端末向けに、処理の切り分けが必要になる。 Canvas要素は実際のサイズ。Canvas上の座標系をあわせるために、 Canvasのscaleを0.5にする。
Slicyはあっと驚くほど便利だった。 - colopixie
Slicyは、PSDをD&Dするだけで、Photoshopでレイヤーやフォルダに指定した方法で名前をつければ書きだしてくれるアプリです。 これがめっちゃ便利！驚いたたまげた。 App Storeで買いました。 今回は、Slicyの公式のデモファイルを使って、解説していきます！ちょうべんり！ 公式のデモファイルは、下記からダウンロードできます（いきなりZIPダウンロードになります） 通常 (Basic Tagging) 「Basic Tagging」のフォルダーを開き、PSDを開いてみましょう。 PSDを開くと、フォルダーやレイヤーに”.png”や”.jpg”など追加します。 そうすると・・・？ そのPSDを”Slicy”にドラッグアンドドロップすると、ぽこん！と先ほどの”.png”のついたフォルダーやファイルが出てきます。 これを上の”Copy”を押して全て保存するか、個別のファイルをドラ
第9回 LESSのメリットを最大限に生かした書き方 | gihyo.jp
前回はMedia Queriesの利用方法とその難点、LESSのコンパイラを利用して少しラクする記法をご紹介しました。 今回はさらに掘り下げて、処理をmixinとして作成し、LESSのメリットを最大限活かす方法をご紹介します。 自動化のポイント まず、前回のコードをおさらいしておきましょう。 //LESS body { #foo { background-size: 320px 480px; @media screen and (-webkit-device-pixel-ratio:2){ background-image: url('bg_x2.png'); } @media screen and (-webkit-device-pixel-ratio:1){ background-image: url('bg.png'); } } } @mediaを毎回書くのは大変ですし、ミスタイプを
Webサイト＆WebアプリのRetina対応方法まとめ
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
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);
Ben Alman » Fixing "Retina" Image Scaling with Gyazo
You know the new Apple Retina MacBook Pro laptop? The one with the super-high resolution display? Well, I got one last week, and I spent all weekend updating my dotfiles to work with OS X 10.8 (Mountain Lion). And after a lot of wrangling with XCode, I finally managed to get everything working. Well, almost everything. While using Gyazo, I’ve encountered one particularly annoying “Retina” related
HD画面でのセリフ体 vs. サンセリフ体
ピクセル密度が220PPI以上あるそこそこ良いコンピュータ画面は、画面上のタイポグラフィに新しいユーザビリティガイドラインをもたらす。 Serif vs. Sans-Serif Fonts for HD Screens by Jakob Nielsen on July 2, 2012 日本語版2012年7月19日公開 コンピュータ画面は大型化するだけでなく、こちらのほうがより重要かもしれないが、ここに来て質も上がってきている。2012年の6月、Appleは高解像度画面を搭載した初めての一般向けコンピュータ、MacBook Proを発売した。その解像度は15インチディスプレイにおいて2880×1800、この画面の提供するピクセル密度は220 PPIである（PPIは1インチあたりのピクセル数。これはレーザープリンタの性能を測る尺度であるDPI（1インチあたりのドット数）に相当）。 Appleは
hxxk.jp - Retinaディスプレイとppi（pixel per inch）の関係についてのまとめ、ppiの算出方法
Retinaディスプレイとppi（pixel per inch）の関係についてのまとめ、ppiの算出方法 記事データ 投稿者 望月真琴 投稿日時 2012-06-14T23:32+09:00 タグ iPad Mac ppi まとめ 概要 iPhone 4が登場した時は300ppiを超える解像度のRetinaディスプレイ、というアピールでしたが、iPadやMacBook Proでは必ずしもRetina >= 300ppiというわけではないようです。300ppiを保ったままでiPadやMacBook Proのサイズを実現するには、どれだけのピクセル数が必要なのか試算してみました。 リプライ リプライはまだありません。 Retina == 300dpi and upなのか？ 15インチ MacBook Pro Retinaディスプレイモデルが発表され、2,880px×1,800pxという高解像度
Targeting iPhone 4's Retina Display with Media Queries
Targeting iPhone 4's Retina Display with Media Queries03-11-11 Ryan Buttrey Here’s how to target the iPhone 4 in a media query and replace the background images with hi res images. The iPhone 4 has a gorgeous display. Text renders absolutely beautifully. However, images by default look crunchy and crappy (especially next to the beautifully crisp text). When we build sites, we spend time and effort
新型MacBook Proのおかげで大半のウェブサイトはデザインやり直し？ - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
ついに新型MacBook Proが登場し特にRetina採用の美しいディスプレイが話題を呼んでいます。画面が綺麗になることはユーザーにはとっても良いことなのでしょうが、この鮮明すぎる解像度が既存のウェブデザインに大きな波紋を呼んでいるようで。。。今回はそんなウェブデザイナー・ウェブ運営者が気になる話題をThe Next Webから。 – – SEO Japan 昨日AppleのWWDCを見た他の誰もと同じように、私は、最新のRetinaディスプレイ搭載のMacBook Proを自分の物にしたいと思っている。もちろん、2,200ドルからという価格を考えると、飛びつくには待たなければならないだろう。何とかなると信じて思い切るつもりでいるが、そう考えているのは私だけではないと思う。待っている間に、この新しいリリースの何が特別なのかを見る価値はある。 新しいMacBook Proモデルは、ハイエン
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
How to preview the Retina display enhanced Apple.com in Safari on Mac or PC | AppleInsider
Apple's official website has been quietly updated to take advantage of the Retina display on the new iPad. Users can preview the higher-resolution site now with a simple tweak in Apple's Safari desktop Web browser. As AppleInsider first reported earlier Tuesday, Apple has begun upgrading portions of its website with high-resolution images that are large enough to fit on the third-generation iPad's
MacBook Pro Retina Display Analysis
Although Haswell will likely be a great fit for the next-gen MacBook Pro, anyone who travels a lot and does a good amount of work with their machine will be seriously tempted to upgrade now. I've touched on the SSD speed bump already, and I've talked about how Apple is handling DPI scaling in Lion. To recap, Retina Display MBP owners now get a slider under OS X's Display Preferences that allow you
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Headless Commerce with Salesforce
文字をなめらかにした - hitode909の日記
Wells – Medium
WebサイトをRetinaディスプレイに対応させる方法
Chrome Canary Fixes Rendering Issue with Retina MacBook Pro