iPhoneやiPadでページを見ながらウェブデバッグが可能に！iOS 6から搭載された「Webインスペクタ」が超絶便利！ | gori.me（ゴリミー）
【img via iOS 5.1 Update. by MJ/TR (´･ω･)】 iPhoneやiPad向けにウェブ制作をしている人は知らないと損！ 最近頻繁にgori.meのチューニングを行なっているのだが、iPadで見ると崩れてしまう表示を長らく修正できずにいた。というのも、Macで見るとどのブラウザでも問題なく表示されていたから。 そんなところに先輩が「Safariのウェブインスペクタを使うと良いよ」と。基本的にGoogle Chromeで開発をしている僕としては「なぜわざわざSafari？」と思っていたが、iOS 6搭載端末を繋げるだけでSafariのウェブインスペクタはGoogle Chromeの何倍も便利になる。iOS 6からの新しい機能で、iPhoneやiPadでページを見ながら直接ウェブデバッグができるのだ！！ そもそも「Webインスペクタ」って何？ そもそもWebインス
ウェブページのスタイルを iPad に最適化する方法
iPhone 4 のピクセル数は 3G/3GS の 4 倍(縦横が2倍)だが、(iPhone 4 の Safari は)画面幅のメディアクエリーに関して旧機種と同様に振る舞うらしい。このため、iPhone 4 を 3G/3GS と区別するためには、画面幅ではなく -webkit-device-pixel-ratio という特性を使うようだ(→ 詳細は「iPhone 4 の CSS を切り替える方法」を参照)。いかんせん、iPhone 4 をまだ手に入れていないから試しようがない。 デバイスの向きを検出する ウェブページのほとんどは縦方向へのスクロールを前提にして作られているため、縦のサイズよりも横のサイズがレイアウトにとっては重要だ。iPhone や iPad のように向きを変えることで横(画面の幅)が変わるデバイスでは、向きに合わせてスタイルを指定したくなる。そのための特性が orien
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
