How to say to Android's Chorme that my page need @media conditional directive?

Question

I am using this "pure HTML + CSS" solution to a flex-layout, that is working fine when I change window size at my desktop browser, but when view the same page in a mobile device, specifically Android's Chrome, the browser do a "zoom out" instead to use CSS @media screen and (max-width: 360px) directive.

How to say to Chrome to use the directive and not doo zoom-out? I need to use a kind of viewport? And the viewport not destroys the desktop layout?

Hum.. That is a good clue (!) Thanks @TrobFrank I will test tomorow this viewport (scale=1 make sense!). — Peter Krauss, May 09 '18 at 20:44
Tested: YES, it is the solution! Please @TrobFrank, post your comment as answer, and you will take the 50 votes of bounty! — Peter Krauss, May 09 '18 at 21:08

score 1 · Accepted Answer · edited May 10 '18 at 21:03

Make sure that you have <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your document <head>.

Please see the tutorials or spec for more information for why this is necessary:

"Viewport basics" at developer.mozilla.org
CSS Responsive Web Design (RWD) / Viewport at W3Schools
https://www.quirksmode.org/mobile/viewports2.html
W3C official draft specification.
In nowadays the "live reference" is yet the Apple's specification.

PS: question/answer about javascript access to Viewport

How to say to Android's Chorme that my page need @media conditional directive?

1 Answers1