I've seen a bunch of stack overflow questions answered that address the problem of showing a desktop version on mobile, but I'm trying to discover how you could force a browser to render a mobile version of a site on desktop.
But is there some equivalent for desktop versions, so that I can 'trick' the browser into using media queries for a smaller device width? Essentially loading the mobile css onto the desktop version.
In essence I'm trying to add a toggle button that when clicked renders my page as though it were mobile. I'm aware you can achieve this affect with chrome tools, but I want to build in that functionality, and am struggling to figure out how to tell the browser to behave as though the viewport were mobile-sized.
Thank you!
if your CSS media queries doesn't work fine on desktop, you're probably missing
<meta name='viewport' content='width=device-width' />
and if they work fine but you want your website to has same view in both mobile and desktop, then why are you using media queries at all?
remove them and your CSS will work on every size as the same
load the site on your mobile phone, take note of the url. If it has a "/m", for example, "https://www.example.com/m" then include it as such in your desktop browser and the mobile version would be loaded. It works for me.