У меня очень странная проблема с отзывчивостью на тестируемом сайте. Я тестировал сайт на четырех разных устройствах.
На iPhone XR, Huawei Mate 20 Pro и Huawei P30 Pro сайт более или менее выглядит следующим образом:
Однако при использовании Firefox на OnePlus 5T сайт выглядит следующим образом:
Мне кажется, что устройство полностью игнорирует метатег <meta name="viewport" content="width=device-width, initial-scale=1.0">, но я не знаю, как определить, так ли это на самом деле.
Ниже приведены характеристики протестированных устройств - их размеры, разрешение и разрешение в пикселях. ios:
Device: Viewport: Resolution: Device Pixel Ratio:
iPhone XR 414 x 896px 900 x 1947 2.1733333333333333333333333333333xDPR
Huawei Mate 20 Pro 360 x 780px 1440 x 3120 4xDPR
Huawei P30 Pro 407 x 882px 1080 x 2340 2.6533333333333333333333333333333xDPR
OnePlus 5T 314 x 681px 828 x 1792 2.63xDPR
На первый взгляд спецификации кажется, что проблема может быть просто вызвано меньшим размером области просмотра OnePlus 5T (полученным делением разрешения на отношение пикселей устройства), но даже при установке Firefox Responsive Mode на тот же размер области просмотра, сайт по-прежнему выглядит нормально, и ничего похожего на него выглядит на 5T.
OnePlus 5T старше, чем другие устройства, но, выпущенный в 2017 году, он не совсем древний, и, кажется, необходимо его поддерживать, поскольку вполне возможно, что пользователи все еще просматривая сайт на устройствах этого возраста, хотя, возможно, профессиональные веб-разработчики будут не согласны с тем, поддержат ли они его или нет.