How to implement the display of the site at a minimum screen resolution (phones)?

Question

css

Hello people, I need help. I am building a website with responsive design using @media requests, everything works fine, but the problem appears when the website is opened on a phone. The minimum site width of 480px
is used next. the code:

@media (max-width: 699px) {
  .container {
    max-width: 699px;
    padding-right: 30px;
    padding-left: 30px;
    margin-right: auto;
    margin-left: auto;
  }
  .header {
    min-width: 480px;
  }
  .maincontent, .beforefooter, .footer, .footerphonesmall, .afterheader, .preimblock, .tarifblock, .opisblockforpc, .opisblockformid {
    min-width: 480px;
  }
}

Here it is clear that the design stretches up to 699, stops at 480 pixels.
When we open the site on the phone, we see that for some reason it is immediately scaled, and a horizontal scroll bar appears.
meta tag is used

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

Does anyone have any advice on solving this problem? I would like the site to immediately open in the appropriate resolution min 480px without scaling
patient: ___ f2g.webkl.ru

Answer 1

in a hat

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

when laying out, you must specify

html {
    overflow-y: scroll;
}

and take into account the scroll width on the right, that is, 480 is not clientWidth, but offsetWidth, that is, not 480, but 480-(scroll width)

Answer 2

Try like this:

<meta name="viewport" content="width=device-width, maximum-scale=1">

Answer 3

how to open: https:
//drive.google.com/file/d/0B_NLP2Ic1Pr6b1QwO...
how to open:
https://drive.google.com/file/d/0B_NLP2Ic1Pr6d2VxW...