Удивительно, но я только что обнаружил, что «добавить настраиваемое устройство» в «Эмулируемые устройства» в Chrome devtools не отображает мои медиазапросы, как они фактически отображаются на реальных устройствах. Я только что проверил это на Samsung S8 и iPhone XS.
Я добавил их с правильным разрешением области просмотра, соотношением пикселей устройства (DPR) и «строкой агента пользователя». Прежде я уже добавил свой собственный мобильный телефон, Huawei P20 Pro.
К моему большому удивлению, iPhone XS и Samsung S8, а также уже добавленное устройство P20 Pro представили сайт, над которым я сейчас работаю, так, как и ожидалось (СМИзапросы работают как положено), в то время как на реальных устройствах только P20 Pro выглядит как версия devtools - S8 и XS визуализируют так, как будто они отвечают на медиа-запрос «среднего устройства» (max-width: 992px). Я удивлен, потому что все три устройства отвечают на мои запросы, как я и ожидал в devtools (все они выглядят более или менее одинаково - как и должно), только S8 и XS ведут себя по-разному на реальных устройствах.
Сначала я подумал, что, может быть, мне стоит ввести фактическое разрешение (не окно просмотра) вместо него, но потом все родные и мой пользовательский P20 работают нормально. IPhone XS указан с viewport- / css-width 375px, а S8 с 360, поэтому я просто не понимаю, почему медиа-запросы не работают, когда они установлены на max-width 415px, и они работаютотлично на P20.
Мне, очевидно, нужно работать с медиазапросами, но это сложно сделать, когда у меня нет устройств в devtools для тестирования запросов.
Кто-нибудь может дать мне толчок в правильном направлении?