0

I develop a webapp with bootstrap 4 as front-end framework. My app is desktop first, but i make some of view adapt to mobile and a special menu adapt to mobile.

My app break at 768 px, under it become the mobile view.

When i test it on my mobile (samuns galaxy a51), on portrait its OK, but on landscape it show the desktop version, and its not what i want.

My smartphone resolution is 2400 x 1080, so im wondering two things :

  • based on what i understand, in portrait i suppose to have 1080 px width with my phone, so why the app is shown as the mobile version ? (this is what i want, but i dont understand how it works)
  • on landscape its 2400 and desktop version is shown (which is logical), but its not what i want. but the media queries in boostrap is based on pixel, so how to deal with that ?

actually i don't understand why its based on pixel, its not a good way to determine the responsive (we can have a small screen with big resolution). A mix between the resolution and the screen size would be a better idea.

How you deal with that in your projects ? what the best way to make something really adapt to mobile and tablet ?

thanks for your help

JulienG
  • 158
  • 1
  • 14

2 Answers2

1

I found some helpful answers to your question in this previously asked question:

Media Queries: How to target desktop, tablet, and mobile?

Basically, actual device resolution doesn't represent pixel size. As devices progress, they become more and more high resolution - a physical pixel is not a css pixel anymore. Imagine how fun it would be pressing a 20px button on a retina display if it were physical pixels. :)

Shrimp
  • 472
  • 3
  • 9
0

as pointed by other comment, there is a mechanism (the device-pixel-ratio) who make one pixel not really represent one pixel, to resolve the problematic of high resolution on small screen.

you can find this ratio in js by typing window.devicePixelRatio. In a desktop, the value is 1 On my phone, the value is 3, so instead of 2400x1080 the device is seen as 800x360

my app break at 768, so its normal in landscape the desktop version is shown because 768 < 800. For resolve that, i change the width where my app break to 992px, and now its OK

JulienG
  • 158
  • 1
  • 14