Chrome/Safari でスマホサイズの表示テストをする方法

スマホ用のWebページ(アプリ)なんかを作っていると、ChromeSafari でその画面サイズで表示を確認したいことが多いですよね。インスペクタ便利だし。実機とかエミュレータとかめんどくさい。

一般的なスマホの画面サイズ 320 x 480 にブラウザのウインドウサイズを変更すれば、メディアクエリとかで自動的に表示を切り替えてくれるはず。が、私のMacだとなぜか Chrome/Safariの横幅が 400px までしか縮められない!微妙に足りない!!(Windowsならもうちょっと縮むとか??)

サイズを変更する Chrome Extension とか試してみましたが、だめでした。やはり 400px 以下になりません。しかし、JavaScriptで別窓を開けば自由にリサイズできることが分かりました。

そこで、今見てる画面を、スマホサイズで別窓で開くブックマークレットを使うことにしました。 コードは以下の通り。 javascript:window.open(location.href, 'phone', 'width=320,height=480'); このアドレスを適当な名前(PhoneViewとか)でブックマークに登録しておくと、一発でスマホサイズで確認できて便利!(ブラウザのポップアップブロックにひっかかる場合があるので注意)

ほんとは UA とかも変えたかったけど、JSでは変更できないため断念。Extension作ればUAの変更できるらしいが、とりあえずそれはまた別の機会に。