タグ

displayとdevice-pixel-ratioに関するruedapのブックマーク (4)

  • 新しい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
  • ディスプレイのピクセル密度に対するWindows 8のスケーリング機能 まとめ - Yamakiの日記

    Windowsにはディスプレイのピクセル密度に合わせて画面をスケーリングさせる機能が備わっています。ここではWindows 8のスケーリング機能を説明します。 Windows 8のスケーリング機能は、デスクトップ側とストア・アプリ側で異なり、これら2つの設定や動作は完全に独立しています。なお、スタート画面はストア・アプリ側に含まれます。 デスクトップ側 デスクトップ側のスケーリング機能は、「コントロール パネル\デスクトップのカスタマイズ\ディスプレイ」から[小 - 100%]、[中 - 125%]、[大 - 150%]の3種類を設定可能です。 また、[ディスプレイ]画面の中ほどにある[カスタムサイズ変更オプション]をクリックすることで、1%刻みでスケール値を設定できます。最小値は100%、最高値は500%です。 なお、スケーリングの方式は2種類存在し、[カスタムサイズ変更オプション]画面

    ディスプレイのピクセル密度に対するWindows 8のスケーリング機能 まとめ - Yamakiの日記
  • Android端末のdevicePixelRatio

    Android端末のdevicePixelRatio WebKit系のブラウザではdevicePixelRatioというプロパティが定義されています。これは画像1pxを実際のデバイス上で何pxとしてレンダリングを行うかというもの。 CSSでdevicePixelRatioを特定できる -webkit-min-device-pixel-ratioなどは iPhone4のRetina Display対応などで一時期注目されましたね。 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER'S BLOG JavaScriptでは次のように取得できます。 window.devicePixelRatio そこで、Android端末のdevicePixelRatioがどうなってるかTwitterで色々な方に協力いただき調べてみました。

    Android端末のdevicePixelRatio
    ruedap
    ruedap 2012/08/29
    devicePixelRatio値の一覧
  • jQueryでRetinaディスプレイを判別して処理を変える方法|BLACKFLAG

    iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度(1ピクセルの幅が78ミクロン)であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery(JavaScript)を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ

    jQueryでRetinaディスプレイを判別して処理を変える方法|BLACKFLAG
  • 1