0

On my iPhone 7 in Safari a 3in wide div is about 1.8in in real.

Why didn't they set devicePixelRatio so that 3in in css are 3in in real? Is there a specification on how to set devicePixelRatio? Is there a workaround?

 <!DOCTYPE html>
 <html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    </head>
    <body style="margin:0">
        <div style="width:3in;background:orange">3in</div>
    </body>
 </html>
milo
  • 936
  • 7
  • 18
zomega
  • 1,538
  • 8
  • 26

1 Answers1

0

The CSS units such as inch and cm are not recommended to use according to w3.org, except you're planning to print out your webpage:

The only place where you could use pt (or cm or in) for setting a font size is in style sheets for print, if you need to be sure the printed font is exactly a certain size. But even there using the default font size is usually better.

If you really need to use inches as units, please take a look at this answer here

milo
  • 936
  • 7
  • 18