Когда вы создаете веб-сайт, в интересах вашего конечного пользователя всегда помнить о мобильных просмотрах. Обычно это называется «мобильно-адаптивной» разработкой.
Среды iPhone и Android и веб-браузеры почти всегда меняются, что может сильно разочаровывать в мире разработки. Совсем недавно в iOS Safari была добавлена панель поиска в нижней части представления, которая загораживает нижнюю часть большинства веб-сайтов.
Что произойдет, если у вас есть нижняя навигация по вкладкам для мобильных пользователей? Или выдвижной ящик, который теперь скрыт?
К счастью, у разработчиков есть способ определить, заходит ли пользователь с iPhone или Android-устройства, используя следующий код:
// detect if it's an Android device
const ua = navigator.userAgent.toLowerCase()
const isAndroid = ua.includes('android')
console.log(`The user is on an Android: ${isAndroid}`)
const isIPhone = (navigator.userAgent.match(/iPhone/i)) ||(navigator.userAgent.match(/iPod/i))
console.log(`The user is on an iPhone: ${isIPhone}`)
Основываясь на значениях isIPhone или isAndroid, теперь вы можете настроить свой пользовательский интерфейс так, чтобы он соответствовал ОС, используемой нашим пользователем.
В следующем примере используются стили React и Material UI. Если это Android или iPhone, применяется класс mobileHeaderExtraSpace:
<div className={`${isAndroid || isIPhone ? classes.mobileHeaderExtraSpace : ''}`}>
</div>
Внимание. Также может быть полезно применять точки останова к любым стилям, применяемым с этими переменными, на тот случай, если Mac будет считаться «iPhone».
