RWD - rozbieżności w przeglądarkach i nietypowe zachowanie

Question

Witam. Na poniższym obrazku jest robiona przeze mnie strona w Bootstrapie, która zachowuje się zupełnie inaczej dla tych samych wymiarów okna. Przy zmniejszaniu szerokości zmniejsza się cały container razem z wszystkimi elementami. Dodam że wysokość zachowuje się tak przez wysokość 100vh. Od Lewej przeglądarka Chrome, Chrome DevTools, Firefox Developer Tools. Dodam, że na telefonie strona wyświetlała się podobnie jak na środkowym screenie. Skąd takie rozbieżności i dlaczego wszystko w containerze się zmniejsza?

<div class="container-fluid main_content">

.main_content {
	padding-right: 0;
	padding-left: 0;
	background-image: url('../img/img.png');
	background-repeat: no-repeat;
	background-position: center 20px;
	background-color: #E7EEED;
	min-height: 600px;
	height: 100vh;
}

 

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Problem spędzał sen z powiek, a ostatecznie brakowało tylko tych dwóch linijek do poprawnego działania bootstrapa :)