Почему в браузере сайт адаптируется при нажатии просмотр на телефоне, а на мобильной устройстве нет?

Question

[IvanIvanIvanIvanIvan]

Почему в браузере сайт адаптируется при нажатии просмотр на телефоне, а на мобильном устройстве нет?
f0186535.xsph.ru/one/one.html

Вот код адаптации:

@media screen and (max-width: 480px) 
{
	body
	{
		margin: 0;
		padding: 0;
		height:100%;
	}

	.main

	{
		width: 90%;
	}

	.header

	{
		width: 100%;
		height: 120px;
		text-align: center
	}
	
	.container-socialmedia
	{
		display: block;
		width: 100%;
		margin: 0;
	}

	.navigation
	{
		width: 100%;
		display: block;
		height: 160px;
	}

	.menu-container
	{
		width:100%;
		height: 120px;
		margin: 0;
	}

	.container-item-menu
	{
		width: 100%;
		height: 20px;
	}

	.item
	{
		line-height: 20px;
		outline: 1px solid #252323;
	}

	.item:hover
	{
		border:none;
	}


	.text-menu
	{
		font:  10px/10px 'Open Sans',sans-serif;
		color:#9a9a9a;
	}

	.search-container
	{
		width: 100%;
		margin: 0;
		height: 40px;
	}
	.search-wrapper
	{
		width:100%;
		line-height: 40px;
		text-align: center;
	}

	.search
	{
		background: white;
		width:90%;
		font-size: 15px;
	}
	hr
	{
		display: none;
	}

	.middle
	{
		width: 100%;
		height: auto;
	}
	.middle-title
	{
		font:  20px/20px 'Open Sans',sans-serif;
	}

	.middle-top
	{
		width: 100%;
		height: auto;
	}

	.middle-center
	{
		width: 100%;
		height: auto;
	}

	.tv
	{
		display: inline-block;
		width:100%;
		height: auto;
		margin:0;
	}

	.pencil
	{
		display: inline-block;
		width:100%;
		height: auto;
		margin:0;
	}

	.mountains
	{
		display: inline-block;
		width:100%;
		margin:0;
		height: auto;
	}

	.content
	{
		width:100%;
		height: auto;
	}
	.content-center
	{
		width:100%;
		height: auto;
	}

	.content-item
	{
		width: 100%;
		height: auto;
		margin: 0;
	}
	.content-item-img
	{
		height: auto;
	}

	.brand
	{
		width: 100%;
		height:auto;
		margin:0;
	}
	.brand-item
	{
		width: 100%;
		line-height: 120px;
		height: 120px;

	}

	.basement
	{
		width: 100%;
		height:auto;
	}

	.basement-item-container
	{
		width: 100%;
		height:auto;
	}
	.basement-item
	{
		width:100%;
		height: auto;
		border-bottom: 4px solid #5c5c5c;
	}

	.header-basement
	{
	
		text-align: center;
	}
	.text-basement
	{
		text-align: center;

	}
	.basement-picture
	{
		text-align: center;
	}

	.basement-picture-two
	{
		text-align: center;
	}



	.down-basement
	{
		width:100%;

	}

	.container-publishing
	{
		width:100%;
	}

	.all
	{ /*сркывает все, что находится за пределами этого блока*/
  		display: none;	
	}

	.container-publishing
	{
		margin: 0px;
	}

https://jsfiddle.net/tb85Lzcq/1/

Answer 1

[kreoTech]

Видимо для мобильных устройств не задан viewport:

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

Задается в head html файлов