「ppi」と「dpi」は、ほぼ同じ。

「ppi」は、「Pixel per Inch」の略
「dpi」は、「Dot per Inch」の略

どちらも、
「縦横１インチ」の範囲にある「点」の数を表している。

「モニターの点」は、「ピクセル（Pixel）」という単位なので、「ppi」。
「ドット」は、あらゆる機材などで共通として使える「点」を意味するので「dpi」。

「dpi」の方が、
他の「製品」「印刷」「画質」などで、
共通して使用することができるので、
よく見かけ、使用されている。

「ppi」は、
「ピクセル（Pixel）」という単位を使用されている
「モニター」などで使用される。

Back

「@media」を利用して、スクリーンサイズごとにCSSを適用する方法

「PC」用と「スマホ」用とでCSSレイアウトを変更したいときは、モニターサイズによって、CSSなどを区分することで、「PC」用と「スマホ」用とでCSSレイアウトを分けることができる。

CSSに「@media」を使って、モニターサイズごとに追加することで、「スマートフォン」「モニター」を判別して、
それぞれにレイアウトを記述することができる。

「@media」でスクリーンサイズごとにCSSを適用するサンプルコード

1024px幅までのスクリーン

@media screen and (max-width: 1024px) {
body {
background-color:#FFFFFF;
}
}

768px幅までのスクリーン

@media screen and (max-width: 768px) {
body {
background-color:#000000;
}
}

480px幅までのスクリーン

@media screen and (max-width: 480px) {
body {
background-color:#888888;
}
}

320px幅までのスクリーン

@media screen and (max-width: 320px) {
body {
background-color: #FF0000;
}
}

for PC

@media screen and (min-width:1024px) {
p {font-size: 1em; }
}

for iPad

@media screen and (min-width:768px) and ( max-width:1024px) {
p {font-size: 1em; }
}

for iPhone

@media screen and (min-width:480px) {
p {font-size: 1em; }
}

縦向きの場合

@media screen and (orientation:portrait){
p {font-size: 1em; }
}

横向きの場合

@media screen and (orientation:landscape){
p {font-size: 1.2em; }
}

Back

「スマートフォン」で自動的に「文字」を「大きく」させない方法

PC用にレイアウトデザインしたCSSを、スマートフォンで確認すると、
フォントサイズが自動的に大きくなっていることがある。
フォントサイズを自動的に大きくさせたくないときの対策。

CSSに下記のコードを追加することで、スマートフォンで文字サイズの自動変更が行われなくなる。
下記のコードによって、テキストの自動調節機能がOFFになる。
デフォルトでは、「auto」になっているので、自動的に文字サイズが調節される。

body {
-webkit-text-size-adjust: 100%;
}

が！しかし。
Androidのスマートフォンでは、表示するHTMLコードに下記のコードを追加する必要がある。

Back

「iPhone」端末の「画面サイズ」

「iPhone」端末の「画面サイズ」では、
調べたところ、「1290×2796」が「最大サイズ」。
「ppi」では、「476ppi」が「最大値」。

「iPhone」端末の「画面サイズ」一覧

端末名	サイズ	解像度	名称	ppi
iPhone 3G	3.5インチ	320×480	HVGA	163ppi
iPhone 3GS	3.5インチ	320×480	HVGA	163ppi
iPhone 4	3.5インチ	640×960	Retina	326ppi
iPhone 4S	3.5インチ	640×960	Retina	326ppi
iPhone 5	4.0インチ	640×1136	Retina	326ppi
iPhone 5S	4.0インチ	640×1136	Retina	326ppi
iPhone SE(第1世代)	4.0インチ	640×1136	Retina	326ppi
iPhone 6	4.7インチ	750×1334	RetinaHD	326ppi
iPhone 6plus	5.5インチ	1080×1920	FHD	401ppi
iPhone 6S	4.7インチ	750×1334	RetinaHD	326ppi
iPhone 6Splus	5.5インチ	1080×1920	FHD	401ppi
iPhone 7	4.7インチ	750×1334	RetinaHD	326ppi
iPhone 7plus	5.5インチ	1080×1920	FHD	401ppi
iPhone 8	4.7インチ	750×1334	RetinaHD	326ppi
iPhone 8plus	5.5インチ	1080×1920	FHD	401ppi
iPhone X	5.8インチ	1125×2436	SuperRetinaHD	458ppi
iPhone XR	6.1インチ	828×1792	LiquidRetinaHD	326ppi
iPhone XS	5.8インチ	1125×2436	SuperRetinaHD	458ppi
iPhone XS Max	6.5インチ	1242×2688	SuperRetinaHD	458ppi
iPhone 11	6.1インチ	828×1792	LiquidRetinaHD	326ppi
iPhone 11 Pro	5.8インチ	1125×2436	SuperRetinaXDR	458ppi
iPhone 11 Pro Max	6.5インチ	1242×2688	SuperRetinaXDR	458ppi
iPhone SE(第2世代)	4.7インチ	750×1334	RetinaHD	326ppi
iPhone 12 mini	5.4インチ	1080×2340	SuperRetinaXDR	476ppi
iPhone 12	6.1インチ	1170×2532	SuperRetinaXDR	460ppi
iPhone 12 Pro	6.1インチ	1170×2532	SuperRetinaXDR	460ppi
iPhone 12 Pro Max	6.7インチ	1284×2778	SuperRetinaXDR	458ppi
iPhone 13 mini	5.4インチ	1080×2340	SuperRetinaXDR	476ppi
iPhone 13	6.1インチ	1170×2532	SuperRetinaXDR	460ppi
iPhone 13 Pro	6.1インチ	1170×2532	SuperRetinaXDR	460ppi
iPhone 13 Pro Max	6.7インチ	1284×2778	SuperRetinaXDR	458ppi
iPhone SE(第3世代)	4.7インチ	750×1334	RetinaHD	326ppi
iPhone 14	6.1インチ	1170×2532	SuperRetinaXDR	460ppi
iPhone 14 Plus	6.7インチ	1284×2778	SuperRetinaXDR	458ppi
iPhone 14 Pro	6.1インチ	1179×2556	SuperRetinaXDR	460ppi
iPhone 14 Pro Max	6.7インチ	1290×2796	SuperRetinaXDR	460ppi
iPhone 15	6.1(6.12)インチ	1179×2556	SuperRetinaXDR	460ppi
iPhone 15 Plus	6.7(6.69)インチ	1290×2796	SuperRetinaXDR	460ppi
iPhone 15 Pro	6.1(6.12)インチ	1179×2556	SuperRetinaXDR	460ppi
iPhone 15 Pro Max	6.7(6.69)インチ	1290×2796	SuperRetinaXDR	460ppi

Back

「Android」端末の「画面サイズ」

「Android(アンドロイド Pixel端末)」端末の「画面サイズ」は、
調べた時点では、
「1440×3120」が「最大サイズ」。
「ppi」は、「538ppi」が「最大」。

「Android」端末の「画面サイズ」(アンドロイド Pixel端末)

端末名	サイズ	解像度	名称	ppi
Pixel XL	5.5インチ	1440×2560	FHD/9:16	534ppi
Pixel	5インチ	1080×1920	FHD/9:16	441ppi
Pixel 2 XL	6インチ	1440×2880	FHD+/9:18	538ppi
Pixel 2	5インチ	1080×1920	FHD+/9:16	441ppi
Google Pixel 3 XL	6.3インチ	1440×2960	-/9:18.5	522ppi
Google Pixel 3	5.5インチ	1080×2160	FHD+/9:18	443ppi
Pixel 3a XL	6インチ	1080×2160	FHD+/9:18	402ppi
Pixel 3a	5.6インチ	1080×2220	FHD+/9:18.5	441ppi
Pixel 4	5.7インチ	1080×2280	FHD+/9:19	444ppi
Google Pixel 4 XL	6.3インチ	1440×3040	QHD+/9:19	537ppi
Google Pixel 4a	5.8インチ	1080×2340	FHD+/9:19.5	443ppi
Google Pixel 4a (5G)	6.2インチ	1080×2340	FHD+/9:19.5	413ppi
Google Pixel 5	6インチ	1080×2340	FHD+/9:19.5	432ppi
Google Pixel 5a (5G)	6.34インチ	1080×2400	FHD+/9:20	415ppi
Google Pixel 6	6.4インチ	1080×2400	FHD+/9:20	411ppi
Google Pixel 6 pro	6.7インチ	1440×3120	QHD+/9:19.5	512ppi
Google Pixel 6a	6.1インチ	1080×2400	FHD+/9:20	429ppi
Google Pixel 7	6.3インチ	1080×2400	FHD+/9:20	416ppi
Google Pixel 7 pro	6.7インチ	1440×3120	QHD+/9:19.5	512ppi

Back