ブラウザ上でiPhoneなど様々なデバイスの表示を試せる「.resizr」

resizrトップページ
http://resizr.co/

自分のサイトが、iPhoneやAndroid端末で、どのように表示できるかオンライン上で試せるサイトです。サイトのデザインがシンプルでとても使いやすいです。MediaQueryを使ったレスポンシブデザインのサイトの確認に使えそうですね。

resizrレスポンシブ
右のメニューのDeviceから表示したいブラウザを選べる

このサイトどういう時に使えばいいの?

えっ、わざわざこのサイトを使わなくても、レスポンシブデザインの確認はブラウザに標準でついている開発ツール(GoogleのDeveloperToolなど)を使えばいいじゃないって?そうなんです。私もこのサイト見ながら何に使えばいんだろう・・・と思っていました。

使えそうなシーン

何か活用方法があるだろうと、とりあえず考えてみたのが下記のシーン

  • 外出中iPadしかもってない時に、レスポンシブデザインのチェックをしたい。
  • クライアントに「御社のサイトが各デバイスでがどのように表示されるか見れますよ!」と、URLを案内する。
  • IEしかインストールが許されていない会社で勤務している、またはそういう環境で作業しなければならない。

とりあえず、頭の片隅にこんなサイトがあるって覚えておけば、いざという時に役に立ちそうです。

.resizrでしか試せない端末がある

ひとつ確かなメリットがあるとすれば、ブラウザの開発ツールと比較して、テストできる端末が違う事。GoogleのDeveloperToolと比較した時に「Microsoft Surface」「Asus Nexus」がテストできるのはなんと.resizrだけ。・・・なんでしょうか、やっぱりGoogleさんはブラウザの競合という意味合いでMicrosoftの製品に対応していないのでしょうか。

resizrとGoogle比較
左:resizrと右:GoogleのDeveloperToolの比較

resizr DeveloperTool
iPhone 4
iPhone 5
iPhone 6
iPhone 6+
Samsung Galaxy Note 2
Samsung Galaxy Note
Samsung Galaxy S5
Samsung Galaxy S3 mini
LG G3
HTC One M9
HTC 8X
HTC Evo 3D
Sony Xperia Z3
Sony Xperia Z
Blackberry Z30
Motorola Nexus 6
iPad 1, 2, 3, 4, Air
Microsoft Surface ←これ
Microsoft Surface Pro ←これ
Amazon Kindle Fire
Amazon Kindle Fire HD
Samsung Galaxy Tab 3 10″
Samsung Galaxy Tab 2 (7″)
Asus Nexus 7 (v2)
Blackberry Playbook
LG G Pad 8.3
Asus Nexus 7 (v1) ←これ
Asus Nexus 7 (v2) ←これ
HTC Nexus 9
Amazon Kindle Fire(First Generation)
Amazon Kindle Fire HDX 7″
Amazon Kindle Fire HDX 8.9″
Apple iPad 1 / 2 / iPadmini
Apple iPad 3 / 4
Apple iPhone 3GS
Apple iPhone 4
Apple iPhone 5
Apple iPhone 6
Apple iPhone 6 plus
Blackberry PlayBook
Blackberry Z10
Blackberry Z30
Generic notebook
Google Nexus 10
Google Nexus 4
Google Nexus 5
Google Nexus 7
Google Nexus 7 2
Google Nexus S
HTC Evo, Touch HD, Desire HD, Desire
HTC One X, EVO LTE
HTC Sensation, Evo 3D
LG Optimus 2X, LG Optimus 3D, Optimus Black
LG Optimus G
LG Optimus LTE, LG Optimus 4X HD
LG Optimus One
Motorola Defy, Droid, DroidX, Milestone
Motorola Droid3, Droid4, Droid Razr, Atrix 4G, Atrix 2
Motorola Xoom, Xyboard
Nokia C5, C6, C7, N97, N8, X7
Nokia Lumia 7X0, Lumia 8XX, Lumia 900, N800, N810, N900
NoteBook with HiDPI Screen
NoteBook with Touch
Samsung Galaxy Note
Samsung Galaxy Note 3
Samsung Galaxy Note II
Samsung Galaxy S III, Galaxy Nexus
Samsung Galaxy S, S II, W
Samsung Galaxy S4
Samsung Galaxy Tab
Samsung Galaxy Tab 7.7, 8.9, 10.1
Sony Xperia S, Ion
Sony Xperia Sola, U
Sony Xperia Z,Z1

ウェブサービスの.resizr、今後の進化に期待です。

ピンポイントなHTMLメールのレスポンシブ化、HTMLメールはメーラーがどれくらいCSSに対応しているか加味しながら実装する必要があるので鬼門なんです。

  • このエントリーをはてなブックマークに追加
« »

経営者と経営者の妻が沖縄で楽しく生きるためのアレコレ デザイン・カメラ・ロードバイク・旅・畑

© 2017 やまぐち家の生態