Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@7968

【検証】本当にiPhone(デバイスピクセル比2)だと 1px が 2px で表示されるの?

検証方法

今回、iPhone6(デバイスピクセル比2)の環境で検証します。
このような環境で <meta name="viewport" content="width=device-width"> を指定すると HTML / CSS 上 で 1px と指定しても、実際の画面上では 2px で表示されます。
文章中の言葉はそれぞれの下記の意味です。

文章中 意味
HTML / CSS 上 CSSピクセル(論理ピクセル)
実際の画面上 デバイスピクセル(物理ピクセル)

本当に 2px で表示されるのか確かめます。
下記のように 1px の線を指定したHTMLファイルをiPhone6で表示します。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>iPhone - test</title>
<style>
body { background: #000; padding: 20px; }
.bar { width: 100px; height: 100px; border: 1px solid #fff; }
</style>
</head>
<body>
<div class="bar"></div>
</body>
</html>

iPhone6の画面をマイクロスコープ(商品:handymicron3、光学ズーム:250倍、デジタルズーム:4倍)で撮影しました。

結果

画面上に表示された矩形の右下角を撮影しました。

iPhone6-resize.jpg

本当に HTML/CSS で 1px と指定したものが、画面上では 2px で表示されました。

note

note でも記事を公開してるので、興味がある方はご覧ください。

【初学者向けコードリーディング】 PHP の TODO アプリのコードを一緒に読み解こう

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What is going on with this article?