How to get desktop layout on all devices?

[blacklightpy]

If I put in variables.scss

$breakpoints: (
  mobile: 0px,
  desktop: 400px,
);

I get a viewport of 400 px in all devices, even desktop.

What I want is to get the file navigation tree and table of contents to be visible on devices with 400px viewport, by zooming in. I thought this config would display desktop layout on 400px+ viewport devices. and tablet layout on all other devices.

With the above config, I do get the file navigation tree and table of contents, but all crammed into a small 400px content width. That's not what I want, I want the full device width to contain the whole layout. In small screens (400 px+), I'd want them to have a minimum viewport width of 1200 px.

If I set <meta name="viewport" content="width=1201"/>, it's of no use either, because the viewport will still be set to device viewport width effectively.

How do I do this?

[saberzero1]

I'm not entirely sure what you're trying to do, but let me explain what your current settings do:

• On screens less than 0px wide will use the mobile layout.
• On screens between 0px and 400px wide will use the tablet layout (left sidebar. Right sidebar below page)
• On screens 400px and wider will use desktop layout.

[blacklightpy]

@saberzero1 That is what's intended. But on screens 400px and wider, it crams everything into a 400px width, which makes everything unreadable.

[saberzero1]

@saberzero1 That is what's intended. But on screens 400px and wider, it crams everything into a 400px width, which makes everything unreadable.

Can you try this for the desktop variable: desktop: max(400px, 100vw),

[blacklightpy]

Worky!

[blacklightpy]

@saberzero1 Actually no, the mobile view in developer tools shows desktop layout on all resolutions. But on mobile, my three browsers show tablet mode.

1. LineageOS WebView Browser: Fits tablet mode into viewport, right side crammed in, with file navigation taking the real estate.
   • Viewport Width (mobile view): 463
   • Viewport Width (desktop mode): 463
2. Google Chrome: Tablet mode, well zoomed out to fit content well. Same in both mobile view and desktop mode. Desktop mode seems a bit zoomed in.
   • Viewport Width (mobile view): 463
   • Viewport Width (desktop mode): 979
3. Firefox: Tablet mode, well zoomed out to fit content well. Same in both mobile view and desktop mode. Desktop mode fits in view, while mobile view lets me scroll a bit to the right.
   • Viewport Width (mobile view): 558
   • Viewport Width (desktop mode): 1168

[blacklightpy]

Nvm, I got the full desktop layout on developer tools because it was cached. Now even desktop shows only the tablet mode.

[blacklightpy]

I think I know what can fix this.. ~100vw-1~ calc(100vw - 1px), because only 1201px wide viewports show desktop layout in the default config.

NOTE (for anyone copying this): the space before and after the - is important.

[blacklightpy]

That worked on all browsers except the LineageOS WebView Browser, which is pretty basic and has issues.