How to set the width of the layout through the @ media- screen for the phone? Accessing the site from a smartphone, the layout opens like on a computer.

In the browser, while reducing the width, the elements are transformed as needed.

    3 answers 3

    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    • A small amendment instead of ";" need "," <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> - seano

    As an option, you first set up common styles without a media screen, which will be applied primarily to phones. And then specific ones, for example, for computers: @media (min-width: 800px) {......}

      I have implemented it like this: pastebin

       <link rel="stylesheet" media="all and (min-width: 1002px) and (max-width: 1247px)" href="http://magnitog.ru/templates/adaptive/css/978.css" />--> <link rel="stylesheet" media="all and (min-width: 768px) and (max-width: 1001px)" href="http://magnitog.ru/templates/adaptive/css/748.css" /> <link rel="stylesheet" media="all and (min-width: 0px) and (max-width: 767px)" href="http://magnitog.ru/templates/adaptive/css/300.css" /> <!--[if lte IE 8]> <script type="text/javascript" src="http://magnitog.ru/templates/adaptive/js/jquery.media-query.min.js"></script> <script type="text/javascript"> $(function() { $.mediaquery([ //{minWidth: 1248, maxWidth: 1407, href: 'http://magnitog.ru/templates/adaptive/css/1218.css'}, //{minWidth: 1002, maxWidth: 1247, href: 'http://magnitog.ru/templates/adaptive/css/978.css'}, {minWidth: 768, maxWidth: 1001, href: 'http://magnitog.ru/templates/adaptive/css/748.css'}, {minWidth: 0, maxWidth: 767, href: 'http://magnitog.ru/templates/adaptive/css/300.css'} ]); }); </script> <![endif]-->