1

Is it possible to maintain the same div size across all device? My goal is to have the same 2inx3in rectangle across all devices but it's not working.

Here is a sample of my code:

        <div id="area" style="border: 1px solid #ff0000; margin: 0 auto; width: 2in; height: 3in;"></div>

And here is a sample of my output:

enter image description here

Hope someone can help. Thanks!

Akuaku Wompa
  • 11
  • 2
  • you are giving width and height in "in" which will be different for different resolution. Try giving pixels. 412px and 79px – MyTwoCents Jul 20 '18 at 07:17
  • 1
    Technically, even pixels will cause a change in the size as all devices don't have the same resolution or PPI. What you could do is have a percentage value multiplied by the viewport height or width. That way, it would resize across all devices. – Amruth Pillai Jul 20 '18 at 07:20
  • Can you give an example of what it would look like if it was working? I'm a bit confused what the problem is. – Keara Jul 20 '18 at 07:20
  • i agree with amruth, even pixels doesnt give out the exact size. im looking for a formula that can probably compute it. @keara, the boxes should look the same 3inx2in in real world size regardless of the device. – Akuaku Wompa Jul 20 '18 at 07:35
  • Oh, is one of them slightly smaller than the other? Sorry, it's hard to tell from the picture. The rectangles are just very close in size. Also - would this post help at all? https://stackoverflow.com/questions/3166501/getting-the-screen-density-programmatically-in-android – Keara Jul 20 '18 at 07:43
  • @Keara thanks for this but im looking for a js/html5 solution. still a great input though. :) – Akuaku Wompa Jul 20 '18 at 07:51
  • Gotcha. You might want to edit your question to include the fact that you're looking for js/html5 only, just so people know. – Keara Jul 20 '18 at 17:46

6 Answers6

1

There is a media query that can detect certain pixel densities

@media (-webkit-device-pixel-ratio: 1) {
  .area {
    width: 300px;
  }
}

@media (-webkit-device-pixel-ratio: 1.1) {
  .area {
    width: 272px;
  }
}

@media (-webkit-device-pixel-ratio: 3) {
  p {
    width: 100px;
  }
}

Of course you should add as much media queries as much devices you'd like to support.

It only works on Webkit engines like Chromium and Opera.

Danon
  • 2,771
  • 27
  • 37
0

I would not recommend such a solution, having an adjustable size is the best solution in most cases. But have you tried to set the width and height to fixed pixel?

Try something like this:

height:70px; width: 70px
Martin I
  • 35
  • 7
0

The problem is that you're using inches, so the inches will depend of the device you're opening the webpage from.

So I will recommend to use an other mesure like px and probably you should use:

min-width: Size px;
min-height: Size px;
GonzaloPani
  • 170
  • 15
0

Unfortunately not using CSS because it depends on the pixel density of the device screen. The css inch (in) measurement is not the same as a physical inch

Leo
  • 14,625
  • 2
  • 37
  • 55
0

Neither with pixel, inches or percents alone this is doable. You would need device info like PPI, screen size and resolution and calculate how many pixels the div should have if you want it to have the same size in inches on every device.

Lumpenstein
  • 1,250
  • 1
  • 10
  • 27
  • do you happen to have the exact formula that i can follow? – Akuaku Wompa Jul 20 '18 at 08:11
  • Directly not sorry, never had to do this myself. But this thread looks promossing: https://stackoverflow.com/questions/8478882/how-do-dp-dip-dpi-ppi-pixels-and-inches-relate – Lumpenstein Jul 20 '18 at 13:59
-1

Try to use m which stands for meters and ft, which stands for feet. These are realworld lenghts, and they should help you

Yu Alypse
  • 1
  • 3