Hello. I just can not figure out how to set up a zone of visibility of the site for mobile phones. At the moment, when you load the site on your mobile, the top corner of the page is displayed, and then you can scale it manually. The code contains the following command:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

It is necessary to show a zone width of 750 px. I tried a media query of this kind:

 @media screen and (max-width: 640px){ @-ms-viewport { width: 750px; } @-o-viewport { width: 750px; } @viewport { width: 750px; } }

But it did not give any effect. What is being done wrong?

    1 answer 1

    Good evening. Use this meta tag, it will prevent mobile browsers from scaling your site:

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    Media queries for popular devices can be found here .

    To show a 750px wide zone with a screen width less than 750px, use this media query:

     @media only screen and (max-device-width: 750px){ body{ width: 750px; } }
    • Does not respond to the media request. Wrote a separate CSS file, connected to the site template. Maybe it's in some special work of the site template on bitrix? - Alla Nov.