タグ

CSSとdeviceに関するloosecontrolのブックマーク (2)

  • iPhone 4 の CSS を切り替える方法

    携帯電話 (Nokia, Sonye Eicsson, iPhone) やMac、写真、吉田カバン、スマートフォンサイト制作 (HTML5, CSS3) などについてのブログ iPhone 4とiPhone 3G/3GSとで、スタイルシートを切り換える方法を考えてみました。 iPhone 4のディスプレイ解像度は従来機と比べて縦横それぞれ2倍になりましたが、iPhone 4のSafariではviewportを従来どおり「width=device-width」と指定しても、320×480ピクセルの画面を2倍に拡大して表示されるため、ディスプレイ解像度の違いを考慮しなくても、従来と同様に表示できます。 しかし、これでは画像にジャギーが発生してしまうので、iPhone 4を区別できないかと色々探っていたところ、JavaScript(DOM?)に「window.devicePixelRatio」と

    iPhone 4 の CSS を切り替える方法
  • ウェブページのスタイルを iPad に最適化する方法

    iPhone 4 のピクセル数は 3G/3GS の 4 倍(縦横が2倍)だが、(iPhone 4 の Safari は)画面幅のメディアクエリーに関して旧機種と同様に振る舞うらしい。このため、iPhone 4 を 3G/3GS と区別するためには、画面幅ではなく -webkit-device-pixel-ratio という特性を使うようだ(→ 詳細は「iPhone 4 の CSS を切り替える方法」を参照)。いかんせん、iPhone 4 をまだ手に入れていないから試しようがない。 デバイスの向きを検出する ウェブページのほとんどは縦方向へのスクロールを前提にして作られているため、縦のサイズよりも横のサイズがレイアウトにとっては重要だ。iPhoneiPad のように向きを変えることで横(画面の幅)が変わるデバイスでは、向きに合わせてスタイルを指定したくなる。そのための特性が orien

  • 1