Не работает адаптация на некоторых устройствах

@Aximero · Регистрация: 04.08.2016

Author24 — интернет-сервис помощи студентам

Я в сss прописываю адаптивный дизайн следующим образом:

CSS

@media screen and (min-width: 799px){
 div.platform {
    display: inline-block;
    margin: 0px 1%;
    width: 47%;
 }  
}
 
@media screen and (max-width: 800px){
 div.platform {
    display: inline-block;
    margin: 10px 0;
    width: 98%;
 }  
}

В браузере все это прекрасно работает, но например в режиме разработчика в Google chrome. при уменьшении размеров экрана, все просто уменьшается вместе с текстом, без адаптации.

Так же на смартфоне. В некоторых браузерах работает корректно, в некоторых нет.

В чем причина в двух словах? Как исправить?

@AlexZaw · 05.10.2017, 15:17

попробуйте убрать запрос на min-width

Dmitry · 05.10.2017, 15:21

Сообщение от Aximero

причина в двух словах?

в стремлении браузеров смартфонов дурить по поводу размера их экрана

@Aximero · 05.10.2017, 17:36 **[ТС]**

"в стремлении браузеров смартфонов дурить по поводу размера их экрана"

CSS

1
2
3

@media screen (max-width: 800px){ 
   стили...
}

Стоит воспринимать как если экран меньший за 800px то ...
Значит если у любого девайса экран меньше 800px, то должны работать именно эти стили. В чем ошибка в логике?

Будьте добры привести правильный пример.

@AlexZaw · 05.10.2017, 17:43

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

зы: автор выше, возможно, имел ввиду device-width

Dmitry · 05.10.2017, 17:55

Сообщение от Aximero

Стоит воспринимать как если экран меньший за 800px то ...

оно конечно, спасибо за ликбез, но я-то в курсе озвученного вами, а вот у вас - вопросы...
чтоб понять сказанное мной, вставьте в свою страницу яваскрипт, который определит и покажет ширину экрана в пикселях. да полюбуйтесь на число, которое вам покажут ваши смартфоны. а там гладишь и до "meta viewport" рукой подать уже...

@Aximero · 05.10.2017, 19:58 **[ТС]**

Спасибо

а там гладишь и до "meta viewport" рукой подать уже

Так бы сразу и сказали братан пихни
<meta name="viewport" content="width=device-width">
в head....

Dmitry · 05.10.2017, 20:11

Не по теме:

Сообщение от Aximero

Так бы сразу и сказали братан пихни

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

@AlexZaw Модератор 2277 / 1657 / 651 Регистрация: 07.08.2016 Сообщений: 3,972
	05.10.2017, 15:17	2
	попробуйте убрать запрос на min-width 0

Dmitry 13016 / 7407 / 801 Регистрация: 09.09.2009 Сообщений: 28,983
	05.10.2017, 15:21	3
	Сообщение от Aximero причина в двух словах? в стремлении браузеров смартфонов дурить по поводу размера их экрана 0

@AlexZaw Модератор 2277 / 1657 / 651 Регистрация: 07.08.2016 Сообщений: 3,972
	05.10.2017, 17:43	5
	Все правильно, должны работать стили при размере экрана меньше 800px, может они не к тому применяются? Проверьте на чем-нибудь другом, например можно просто изменить бэкграунд для боди, если вобще не применяются - ошибка в чем то другом. зы: автор выше, возможно, имел ввиду `device-width` 0

Dmitry 13016 / 7407 / 801 Регистрация: 09.09.2009 Сообщений: 28,983
	05.10.2017, 17:55	6
	Сообщение было отмечено Aximero как решение Решение Сообщение от Aximero Стоит воспринимать как если экран меньший за 800px то ... оно конечно, спасибо за ликбез, но я-то в курсе озвученного вами, а вот у вас - вопросы... чтоб понять сказанное мной, вставьте в свою страницу яваскрипт, который определит и покажет ширину экрана в пикселях. да полюбуйтесь на число, которое вам покажут ваши смартфоны. а там гладишь и до "meta viewport" рукой подать уже... 1

@Aximero 1 / 1 / 0 Регистрация: 04.08.2016 Сообщений: 9
	05.10.2017, 19:58 [ТС]	7
	Спасибо а там гладишь и до "meta viewport" рукой подать уже Так бы сразу и сказали братан пихни <meta name="viewport" content="width=device-width"> в head.... 0

Dmitry
	05.10.2017, 20:11 Не работает адаптация на некоторых устройствах #8
	Не по теме: Сообщение от Aximero Так бы сразу и сказали братан пихни обычно потом приходится отвечать на еще кучу вопросов типа "зачем", "почему", и т.д. и т.п. а так - человек нагуглит сам, глядишь, и переспрашивать не будет, и в голове у него отложится в виде добытого опыта на долгую память... 0

Не работает адаптация на некоторых устройствах

Решение