0

I have classic bootstrap 4 responsive layout using

col, col-md, col-lg, d-lg-none, etc..

and media queries like

@media (max-width: map-get(@grid-breakpoints, lg))

How do I force full width view on desktop devices, that uses small resolution.

I would use viewport, but it does not work in desktop browsers. The page can use either scrollbar, or even better zoom.

Liero
  • 25,216
  • 29
  • 151
  • 297
  • What do you mean by small resolution? Do I understand the beamer‘s lower resolution causes the responsive layout for smartphones to become active? – 2x2p Jun 08 '19 at 12:00
  • @2x2p: yes, the media queries detects small viewport and renders mobile version – Liero Jun 08 '19 at 12:03
  • it's about the `min-width` and `max-width` thresholds. I cannot see the exact numbers from your example. But I believe the `@media breakpoint` is higher value on mobile devices than the actual viewport. So you could test other values related to the screen vs window size to identify the a width. – 2x2p Jun 08 '19 at 12:33
  • See if this helps https://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript – 2x2p Jun 08 '19 at 12:37
  • Let's take the iPhone 5 as reference in vertical mode the screen width is 640px. if you only test for the media width an older beamer with just 640 x 480px will be falsely identified as mobile device. But if you also test the height. You can detect that on the iPhone the height is higher than the width and on the beamer height is lower than width, so you could only apply low resolution mobile layout if width is smaller than height. – 2x2p Jun 08 '19 at 13:30
  • of course if I modify threshold, it will work but that is not responsive design anymore – Liero Jun 08 '19 at 15:58

0 Answers0