今更だけどretina対応を考えてみた[簡単] | Cntlog
そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下げておきたいところなので、コーディグ前にどのように画像を切り出すかが悩ましいところです。 高解像度用の画像に対応させる方法 1.読み込ませる画像の大きさを半分にする。 メリット：簡単 デメリット：画像修正の時はHTMLも触らないといけない場合がある。（管理がしにくい） 2.JavaScriptライブラリを使う（今回はRetina.js） メリット：高解像度用の画像を用意するだけで、勝手に読みこんでくれる（管理しやすい） デメリット：読み込む画像の数が増えるので、通信量が増える。 3.Media Queriesを使って高解像度用のデ
![今更だけどretina対応を考えてみた[簡単] | Cntlog](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c2d915aad5d9cf326a23609f76e3bd321549b28/height=288;version=1;width=512/https%3A%2F%2Fblog.cntlog.net%2Fwordpress%2Fwp-content%2Fuploads%2Fcropped-01.jpg)
Retinaディスプレイ対応の画像を自動生成してくれるWordPressプラグイン「WP Retina 2x」 | TechMemo
WP Retina 2xは、Retinaディスプレイ対応の画像を自動生成してくれるWordPressプラグインです。 Retinaディスプレイに対応するためには、表示させたいサイズの2倍のサイズの画像を用意する必要があります。WP Retina 2xを使うことで、いつも通り画像をアップすればRetina対応画像を自動生成してくれるようになります。 Retinaディスプレイとは レティナディスプレイ（英語：Retina Display）は、アップル社製製品のうち、高精細ディスプレイを搭載したモデルに与えられる名称、およびディスプレイそのものを指す名称である。「Retina」は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている、ということから命名された。 引用：Wikipedia WP Retina 2xのインストール インストール手順は以下の通りです。 WP Ret
Retina対応怖くない / ホームページ制作 東京[グリッドネス] / WEBデザイン制作
以前、iPhone4から採用されたRetinaディスプレイに対応すべきかどうかというブログを書きましたが、 ついにスマホだけじゃなくMacbookにもRetinaディスプレイが採用されたようですね。 Retinaディスプレイは通常のディスプレイに比べ、倍以上の高解像度のため、 プレーンテキストがかなり鮮明に見えるが、通常サイズ（表示サイズと画像のサイズが同じ）の画像がぼんやり見えてしまうという難点が。 PCは正直まだ全く高解像度ディスプレイに対応する必要は無いと思いますが、 スマホに関しては無視できない割合が高解像度ディスプレイになっています。 というわけで、 そんなに気が進まなかったけど、現行のiPhone4Sの解像度に対応したスマホサイトを作ってみました。 http://www.smart-ness4.com/i/ ↓iPhone4Sでのキャプチャ画面 対応方法の仕方としては、 ・ht
Takehiko Ono’s Home Page
Hi. I’m Takehiko, a Japanese (nice) webby guy based in Kamakura. Since the dawn of the Internet, I have been designing and writing codes as a hobby like a child playing with a new toy, and before I knew it, they had become my job. 🍱 Bento📃 Resume📒 note🐘 Mastodon🧵 Threads🖥️ CodePen🏄 Pro Web Surfer👟 adidas SAMBA🚵♀️ VanMoofer🎮 Nintendo Addict Articles SNAPSHOTS W05-2024 | 城ヶ島の溶ける猫と水仙と溶ける犬
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
