1

We know that there are different ways we can change the width(or any properties) of the element using the @media queries

We can use Aspect pixel ratio, device width and height. https://developer.mozilla.org/en-US/docs/Web/CSS/@media

Requirement : We have to maintain the same physical width of the element accross platorms, In Mobile,desktop, or any of the DPI element should looks same.

I tried using em, vw,%, no luck. If i used all these the physical look of the element will very from one devioce to another. Some of the device it looks small, some devices it's big.

Can anyone please suggest me how we can achieve this.

Arun
  • 1,177
  • 9
  • 15
  • EX: Element widhth should be same accross platforms(lookwise, not in px, px will very from device to device) – Arun Jan 14 '20 at 05:41
  • 1
    For that you would need to the real-world width of the display device to be available to you. Not possible. – BlueWater86 Jan 14 '20 at 05:43
  • Is there any ways to achieve this by JavaScript – Arun Jan 14 '20 at 05:50
  • Not that I am aware of. – BlueWater86 Jan 14 '20 at 05:50
  • Thanks for your quick response, Please let me know if you find any solutions. – Arun Jan 14 '20 at 05:52
  • Did you ever use a video projector? If so, you probably know that the distance between the projector and the projection surface will change the actual dimensions of the displayed image. There is no way to know what that distance is, and hence what the real displayed size is. Same for any monitor, there is no way to tell their actual size. What is it you really want to achieve? – Kaiido Jan 14 '20 at 06:04
  • @Arun try below solution and see if its working for you? – Prathamesh Doke Jan 14 '20 at 06:08
  • I suggest you read the MDN documentation about sizing units: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units – dwjohnston Jan 14 '20 at 06:22
  • It looks like the best answer you would want would be here: https://stackoverflow.com/questions/279749/detecting-the-system-dpi-ppi-from-js-css - I would maybe apply a class for different DPIs and then change your root font size accordingly. – dwjohnston Jan 14 '20 at 06:23
  • Thanks you all for responses, I have tried multiple solutions https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units with different units system, I would like to know, is it possible to support the element should looks same in all resolution devices using CSS or JS way. – Arun Jan 14 '20 at 06:59

3 Answers3

0

For Desktop with browsers chrome >= 28, safari >=9 IE>=12 opera >=14 use below media query.

@supports (-webkit-appearance:none)

You can use below media query that fits for any mobile device for portrait mode.

@media (max-width:720px) and (orientation:portrait)

Also, at the same time if you want mobile responsive in landscape mode that too you can fix the issue using below media query.

@media only screen and (orientation:landscape)
and (min-device-width: 319px) 
and (max-device-width: 1024px)

In most of the cases there is responsiveness issues in internet explorer, you can use below media query.

@media screen and (min-width:0\0)

I myself have tested these media queries mentioned above, feel free to let me know incase any queries. Hope my solution helps you out!!!!!!!!!!!

Kunal Mahajan
  • 60
  • 6
  • Why downvote i don't understand, this is working for all types of devices. – Prathamesh Doke Jan 14 '20 at 06:07
  • @PrathameshDoke But that doesn't answer the current question... – Kaiido Jan 14 '20 at 06:09
  • @Kaiido, i have already used this media query in our previous project where we achieve the mobile responsiveness. – Prathamesh Doke Jan 14 '20 at 06:13
  • @PrathameshDoke but the current question is not about "mobile responsiveness". What OP wants is to have an element's physical size stay the same across different devices. For instance, an element should always be 1cm when measured in real world, using a real-world ruler, while displayed from any device. – Kaiido Jan 14 '20 at 06:15
0

Maybe you can try with vmin and vmax, those are based in the vh and vw, but you can manage to maintain a very good aspect ratio with those measures. I often use vmin for the more specific measures, as font sizes, image sizes and that. I'd recomend you to use vmax to achive other kind of measures, as containers and so. I also use CSS variables to take an adventage of this things and scale down several things in the media querys, also, with vmin and vmax, I can skip several medias. As an example, here you have a little font size snipet

:root
{
  --text-size: 2.1vmin;
}
.px
{
  font-size: 16px;
}
.vmin
{
  font-size: var(--text-size);
}
@media only screen and (max-width: 700px)
{
  :root
  {
    --text-size: 3.5vmin;
  }
  .px
  {
     font-size: 12px;
  }
}
<p class='px'>Here is the example text with px</p>
<p class='vmin'>Here is the example text with vmin</p>
maneroto
  • 153
  • 1
  • 10
0

I hope it was not a misunderstanding, but you want the element to have an element with an unchanged size in real life measurement no matter the device used? Like an online ruler?

If so, have you tried to use centimeters (cm) instead of pixels or percents? It seems that browsers support this unit, but I don't have a measurement tool to test its real size. The CSS measurement units are well explained on W3.

<div id="cm"></div>

#cm {
  position: relative;
  margin: 0 auto;
  height: 8cm;
  border: 2px dashed red;
  width: 10cm;
}

Here is a code that might help: https://codepen.io/ialexandru/pen/oNgMvXR

Alexandru Iancu
  • 71
  • 5