iOS端末のブラウザハック新機能がSafariに搭載されて割りと秀逸な件

iOS端末のブラウザハック新機能がSafariに搭載されて割りと秀逸な件

スマホのCSSハックってめんどくさい

僕がスマホのCSSハックするときは基本的にいままで

・パターンA
Android「Genymotion」
iOS「iOS Simulator」

・パターンB(割りとゆるめなハックでいいや、ってとき)
Android「Chromeのデベロッパーツール」
iOS「iPhoneをMacに繋いでSafari開発ツールでがんばる(ない端末はChromeで雰囲気ハック)」

なかんじでやってたんですが、iOSSimulatorはデバイスごとに起動するのめんどくさいし、iPhoneつなぐのもライトニングケーブルの不調で読み取れないことがあったりとイライラしてたんですよ。
Chromeはわりと実機とずれたりしますしね。もういやだ。

iOSは「レスポンシブ・デザイン・モード」がとりあえず楽そう

Safariのツールバーの「開発」から「レスポンシブ・デザイン・モード」を選択。
※もしない人はSafari9にアップデートする。もしくは環境設定から「開発」を表示させる。

わりとイカしてそうな画面が出ると思うんですが、基本的にこれでiOS端末はすべてハック出来そうです。

1日使ってみた感じ、実機ともほぼずれたりしなかったので(2015年11月4日時点)、iOSSimulatorで重い動作にイライラするのであればこっちのほうが有用そう。

Retina対応確認のために「1x〜3x」の変更も可能で、ユーザーエージェントの切り替えもできます。

対応はiOS端末のみ

こんな機能、なんで今までなかったんだい!

ってツッコみたくなるような機能ですが、やはり対応しているのはiOSのみなので、Androidは今後シュミレーター使うかChromeで対応していく感じになりそう。