Не работает медиа запрос для iPad?

Question

[Павел]

Я настроил медиа запрос для экранов смартфонов, а для iPad ничего не меняется на сайте, как будто медиа запрос для него вообще не подключен.
В HTML прописал:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Сами медиа запросы:

@media (min-device-width: 320px) and (max-device-width: 480px) {
	h1 {
		font-size: 30px;
	}
	h2 {
		font-size: 30px;
	}
	#online_claim {
		margin-top: 50px;
	}
	#possibility {
		margin-left: 20px;
	}
	.automobile {
		margin-bottom: 20px;: 
	}
	.name_claim {
		margin-top: 20px;
	}
	.phone_head {
		font-size: 30px;
	}
	.chance_mobile {
		margin-left: 22px;
	}
}
@media (min-device-width: 768px) and (max-device-width: 1024px)  {
	h1{
		font-size: 10px;
	}
}

Comments

[Ankhena]

Слово device лишнее и в meta и в media.
Откройте с планшета или смартфона https://www.esolutions.se/en-GB/test

Answer 1

[Михаил Власов]

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

@media screen and (max-width: 992px){
 ...
}

@media screen and (min-width: 992px){
 ...
}

Comments

[alex-1917]

чозабред? устал уже переделывать вот такие вот прыгающие верстки... если ваш код исправно показывается на симуляторах планшетов-смартов, это абсолютно ничего не значит!..))

Answer 2

[alex-1917]

Есть два варианта:

/*==========  Mobile First  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px){}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px){}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px){}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px){}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px){}

/*==========  Mobile Last==========*/
@media only screen and (max-width:1199px){}
@media only screen and (max-width:991px){}
@media only screen and (max-width:767px){}
@media only screen and (max-width:479px){}