CSSで指定したwidthとheightがブラウザで縮小される

発生している問題

htmlとcssで長方形を表示させたいのですが、その幅と高さが指定した大きさになりません。

以下の例では150mmと100mmを指定したのですが、
ブラウザで表示して定規で測定するとおよそ130mmと86mmになります。

どうすればよいでしょうか。

（pxで指定すると、開発者ツールではそのpxで表示されますが、
解像度から期待できる大きさより大きく表示されるように思います。）

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5    <link rel="stylesheet" type="text/css" href="Test.css" />
6    <title>sample</title>
7</head>
8<body class="bg">
9    <div class="colored-area">
10    </div>
11</body>
12</html>

css
1/*背景*/
2.bg {
3    background-color: blue;
4}
5
6/*長方形*/
7.colored-area {
8    width: 150mm;
9    height: 100mm;
10    background-color: green;
11}

補足情報（FW/ツールのバージョンなど）

vaio vjs132c11n
解像度 1920 x 1080
Windows 10
Chrome

行動規範の内容に同意します

回答1件

ベストアンサー

以下の例では150mmと100mmを指定したのですが、

ブラウザで表示して定規で測定するとおよそ130mmと86mmになります。

残念ながら、そういうものです。

低解像度の端末では、px の単位が物理的な参照ピクセルを表し、その他の単位はこれを基準に定義されます。例えば 1in は 96px と定義され、これは 72pt と等しくなります。このような端末では結果的に、インチ (in)、センチメートル (cm)、ミリメートル (mm) といった単位で表される長さは、同名の物理的な単位と同じ長さになるとは限りません。（MDNより、強調は引用者）

投稿2020/05/16 00:24