タグ

cssとviewportに関するnibushibuのブックマーク (3)

  • iPhone6の時代のviewport設定について - Qiita

    従来、スマートフォンの横幅といえば 320px(retina対応で640px) というのが定説でした。 が、iPhone6の普及でそうとも言えなくなってきたのが今日このごろです。 iPhone5の横幅は320px(retina対応で640px) iPhone6の横幅は375px(retina対応で750px) ちなみにNexus5の横幅は360px(retina対応で720px) さてこんな環境で、viewportはどう指定するのがベストなのでしょうか。 前提知識 viewportのwidthという値に、device-widthと指定すると、スマホの画面幅 = 表示するwindowサイズ、となる。 widthにピクセル値(640px、とか)を入れると、表示幅はそのピクセル数になり、それで画面いっぱいになるように適宜拡大縮小される 古いAndroidでは、widthにピクセル値を指定しても

    iPhone6の時代のviewport設定について - Qiita
  • 新しいiPhoneの解像度とCSSピクセル幅を考える - fragmentary

    そろそろSafari 8?のベースになるWebKitのブランチが切られるかなと思って待っていたら月末になってしまった。ネタがないのでiPhoneの噂話でもしよう。 新iPhoneの画面解像度は? まず、確かな情報筋()によると、4.7インチと5.5インチのモデルが出ると。 4.7インチは750×1334らしい。現行iPhoneのディスプレイと同じ326ppiなものを4.7インチにするとこうなると。5.5インチだとフルHDな1080×1920らしい。こちらは新しいディスプレイで401ppiだって。 さて、5.5インチについてはまだわかるんだけど、4.7インチの謎解像度はないのではないかと思っている。というのはデバイス非依存ピクセルを想像すると2つのモデルで幅が異なる可能性が高いから。同じディスプレイが使えるという製造観点での利点や理由はあれど、アプリとかの観点から考えると煩わしすぎるわけです

    新しいiPhoneの解像度とCSSピクセル幅を考える - fragmentary
  • [CSS]iPadの横向きと縦向きでレイアウトを変更するスタイルシート

    Portraitモード(縦向き)のグリッド設計 グリッド 768=30+708+30 708=216+30+216+30+216 実装のポイント iPadの横向きと縦向きでレイアウトを変更するには2つのポイントがあります。 METAタグ iPadのスクリーンで等倍に表示されるように、METAタグで設定します。 <meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" /> スタイルシート 比率を等倍に設定したので、Media Queriesを使用して横向きと縦向きに分岐させます。 /* Landscapeモード(横向き)用 */ #wrap { width:1024px; } @media only screen and (orientation:portrait){ /* Portr

  • 1