このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

スマートフォン devicePixelRatio について

スマートフォン

2011.01.13

この記事は最終更新日から1年以上が経過しています。

スマートフォンには、画像1pxが実際のデバイス上で何pxとしてレンダリングされるかを示す
devicePixelRatioという値があります。

これの値はwebkit系であれば、window.devicePixelRatioに入っています。

javascriptで出力する場合、

document.write(window.devicePixelRatio);

で出力可能です。

また、cssでは-webkit-min-device-pixel-ratioで指定出来ます。

調べたところiPhone4ではこの値が2になっていて、

今まで通りに画像を表示させると自動的に拡大されて画像がボケて表示されます。

【回避策】その1

これを避けるには、実際に表示させたいサイズの2倍のピクセルサイズのものを用意して、

縦横を1/2にし、css又はHTML等で指定を行い

表示させると画像の1ピクセルとデバイスの1ピクセルが1:1の比率となって

拡大されることなく綺麗に表示されるようになります。

日本のキャリアが販売している多くのandroid端末はこのdevicePixelRatioの値が1.5になっています。(2011年1月現在)

【回避策】その2 metaで回避する。

Viewportを操作するMeta Tag、meta name=”viewport” target-densitydpi

を使用し回避する。

2011年1月時点でのiPhoneでは対応しておらず、Android2.0以上のみに効果があるプロパティとなる。

<meta name="viewport" content="target-densitydpi=device-dpi" />

各dpi指定

device-dpi

low-dpi: 120dpi

medium-dpi: 160dpi

high-dpi: 240dpi

dpi = 1インチ(1平方インチではない)の幅の中にどれだけのドットを表現できるかを表す。(wikipedia引用)

また、CSSで画像を切り替えたい場合はこちらを参照に

スマフォンサイト iPhone4等の高解像度デバイス対応 画像を cssでの切り替え

Comment

Related Article

「Band’s」スマートフォン版リリースしました!

2015.06.24

スマートフォンサイト制作における SCSSディレクトリ構成、Class命名について

2014.06.01

ドラクエモンスターズ スーパーライト ジェム 50,000円分 無料GET!! と謳っている【manekin】(マネキン)をやってみた!

2014.05.24

HTML5 WebビューApp ソーシャルゲーム制作時のまとめ

2013.08.17

スマートフォン タッチイベント、距離、速さ等確認ページ

2013.03.07

weinreでiPhone/Androidをリモートデバック

2013.01.27

translateプロパティでAndroid,iPhone端末で画像がちらつく件

2012.09.13

CSS3 アイコン作成 背景指定1つ 光彩グラデーションの表現

2012.05.19

スマートフォン JavaScript タッチ、フリックイベント実装その2 「ボールを投げる」

2012.02.18

スマートフォン JavaScript タッチ、フリックイベント実装

2012.02.18

CATEGORY LIST

LATEST NEWS

Mac 容量足りない問題は、外付けSSDで快適に解決!おすすめ外付けSSD

mac

2024.10.16

Z80エミュレータ- EMUZ80の組み立て

電子工作

2024.10.13

Mac VSCodeで、SFML C++開発環境を作る。

C++

2024.09.09

Rust-SDL2 examplesをすべて試す

Rust

2024.09.01

JavaScriptで、DOMを放り投げる処理

JavaScript

2024.07.27

Rustで創る MOS 6502 CPU その2

Rust

2024.07.23

Rustで創る MOS 6502 CPU その1

Rust

2024.07.19

汎用 3D mesh/model viewerを求め。と、簡単に、FBXファイルをglTF(glb)に変換ツールを求め。

C++

2024.06.06

M1 Macで、OpenGL GLUTを使ってコンパイルする

C

2024.04.27

Rust - Actix Web mongo ユーザー登録 JWT認証

Rust

2024.03.24

Rust - Actix Web JWT 認証認可 APIの作成

Rust

2024.02.25

Rust - Actix Web × JSON 静的ファイルをAPIで返却

Rust

2024.01.19

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US