Проблемы с адаптацией под телефоны

283

20 октября 2017, 13:20

Адаптировал сайт под все телефоны. Но на всех телефонах отображается адаптация под iphone 5.Даже когда я удаляю адаптацию под айфон 5 мой телефон (galaxy core prime разширение 480x800) открывает сайт с разширением 320x568( iphone 5 ).На компе показывает все нормально а на телефоне нет.

/* IPHONE 5*/ 
@media screen and (min-width: 0px) and  (max-width:324px) { 
	body{ 
		overflow-x: hidden; 
	} 
	#logo{ 
		margin-left:0; 
	} 
	.navbar{ 
		margin-top:-20px; 
	} 
	.navbar-collapse, .collapse{ 
		border:none !important; 
		margin-top:10px; 
	} 
	.header{ 
		height: 568px; 
		background-size: 300%; 
	} 
	.header-name>.row>.col-lg-6>h1{ 
		font-size: 27px; 
		margin-bottom: 0px; 
		width:240px; 
		margin-left: 30px; 
	} 
	.header-name{ 
		margin-top:96px; 
	} 
	.header-name>.row>.col-lg-6>h5{ 
		font-size: 19px; 
		width:240px; 
		margin-top:20px; 
		margin-left: 30px; 
	} 
	.header-iphone>img{ 
		max-height: 500px; 
		margin-left:-150px; 
		margin-top: 200px; 
	} 
}  
 
 
/*GALAXY CORE PRIME */  
@media screen  and(min-width:422px) and (max-width:485px) { 
	#logo{ 
		margin-left:0; 
	} 
	.navbar{ 
		margin-top:-20px; 
	} 
	.nav>li>a{ 
		border-bottom: 1px solid black; 
		width: 110%; 
		text-align: center; 
	} 
 
	.navbar-collapse, .collapse{ 
		border:none !important; 
		margin-top:10px; 
	} 
	.header{ 
		max-height: 800px; 
		background-size: 280%; 
	} 
	.header-name>.row>.col-lg-6>h1{ 
		font-size: 40px; 
		margin-bottom:0px; 
		width:300px; 
		margin-left: 0px; 
	} 
	.header-name{ 
		margin-top:96px; 
	} 
	.header-name>.row>.col-lg-6>h5{ 
		font-size: 26px; 
		line-height: 32px; 
		margin-left: 0px; 
		width:300px; 
		margin-top:17px; 
	} 
	.header-iphone>img{ 
		max-height: 500px; 
		margin-left:-150px; 
		margin-top: 200px; 
	}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>HeyU</title> 
	<link href="style.css" rel="stylesheet"> 
	<link href="fonts/font.css" rel="stylesheet"> 
	<link href="media-header.css" rel="stylesheet"> 
	<!-- Latest compiled and minified CSS --> 
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
	<!-- jQuery library --> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
	<!-- Latest compiled JavaScript --> 
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
	<div class="container-fluid header"> 
		<nav class="navbar navbar-inverse  navbar-fixed-top"> 
			<div class="container-fluid"> 
				<div class="navbar-header"> 
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
						<span class="icon-bar"></span> 
						<span class="icon-bar"></span> 
						<span class="icon-bar"></span>  
					</button> 
					<a class="navbar-brand" href="#"><span id="logo">HeyU</span></a> 
				</div> 
				<div class=" collapse navbar-collapse" id="myNavbar"> 
					<ul class="nav navbar-nav navbar-right"> 
						<li ><a href="#">ABOUT</a></li> 
						<li><a href="#">FAQ</a></li> 
						<li><a href="#">SUPPORT</a></li>  
						<li><a href="#">BLOG</a></li>  
					</ul> 
				</div> 
			</div> 
		</nav> 
 
		<div class="container header-name"> 
			<div class="row "> 
				<div class="col-lg-6 col-xs-6 container"> 
					<h1>Simple, safe<br>& beautiful.</h1> 
 
					<h5><span class="header-h5">With <span class="HeyU">HeyU</span>, you'll get fast, simple, secure messaging!</span></h5> 
				</div> 
				<div class="header-iphone col-lg-6 col-xs-6 "> 
					<img src="img/iphone-7-silver.png"> 
				</div>  
			</div> 
		</div>  
	</div> 
</div> 
</body> 
</html>

Answer 1

Тут ты не много путаешь понятия физического разрешения экрана и софтверного (аппаратно-независимого).

К примеру, у iphone 5 физическое разрешение экрана 1136 x 640, но на уровне софта, браузера, шириной экрана будет 320. Аналогично на твоем смартфоне получается.

upd: вот ссылка на хабр https://habrahabr.ru/post/145619/