How to display the mobile version of the site correctly?

Question

css

Hello, I'm having a few issues with the responsive layout. How can they be solved?
1) The display of the mobile version of the site starts with its enlarged version.
Media queries work, but only part of the site is displayed at the beginning, and not the whole site, as intended. The display needs to be reduced, then everything falls into place. (I would like to immediately display the entire site as a whole, and not part of it.) I
use:

media only screen and (min-device-width: 0px) and (max-device-width: 640px)

and

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

2) Sometimes it happens that inline-block elements are displayed as block , most often on a tablet, after changing the horizontal / vertical orientation. (What could be wrong?)
3) How can you calculate from which device a person came to the site? In order to make 2 types of layout, perhaps this will help.

Answer 1

Better by viewport via width than via device-width to capture more retina. device-width is when to completely specify the device.
You can, for example, as in Bootstrap.

media screen and (max-width: 767px) { ... }
media screen and (min-width: 768px) and (max-width: 991px) { ... }
media screen and (min-width: 992px) and (max-width: 1199px) { ... }
media screen and (min-width: 1200px) { ... }