Why not switch from mobile to full version?

Question

css

Good day. I always do layout on Flex.
Faced with the fact that the customer asked why the transition to the full version does not work when you click on the phones of this treasured button in the browser. Nesting FlexBox + Media queries.
Maybe someone can help, what is the problem and how to do it. I roughly understand why, but I'm not sure. How to decide, etc.? There was no such thing on the bootstrap.

Answer 1

Very interesting question!
Why the full version is not displayed is understandable. Media queries generate CSS depending on the screen width, and even with the "Desktop version" checkbox checked, the width does not change.
Found the principle of the feature.
In short, the user-agent request header is changing.

Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76K) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.45 Safari/535.19

From above what was, from below what became. Parsing user-agent with detect.js . If !mobile, then manually force the screen width as for the desktop.
Very crutch!
Also try playing around with cookie view-mode like this:

var viewMode = getCookie("view-mode");
if(viewMode == "desktop"){
    viewport.setAttribute('content', 'width=1024');
}else if (viewMode == "mobile"){
    viewport.setAttribute('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no');
}

Answer 2

There are 2 ways to create a mobile version within the same domain:
1) CSS + media query
2) Parsing USER_AGENT and popping the appropriate version based on the user's browser
I don't know how the "full version" button works on phones, but I suspect that the phone is just slipping site desktop USER_AGENT. If adaptability is done in the first way, then the site does not care about this button.
(In order not to offtopic, I did not consider options for creating a mobile version or mixing the above approaches)
Accordingly, analyze USER_AGENT and if it is desktop, remove this line from the head

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Answer 3

When switching to the full version, remove