Трудно отлаживать, не зная, какой элемент в вашем меню.Но ошибка проста: когда вы кладете свой Samsung вбок, ширина экрана теперь больше 768 пикселей, и нет кода, который может изменить стиль меню.
Чтобы подтвердить, вы можете удаленно отлаживать Chrome на вашем Samsung в вашем ПК
В любом случае, из этого кода есть две вещи, которые, я думаю, вы делаете неправильно:
- Отзывчивый "пуск" на экране с 1024px
Ваш дизайн должен быть всегда отзывчивым, размер экрана не имеет значения, в противном случае вы столкнетесь с подобными проблемами и, возможно, нарушите стиль для пользователей с размерами экрана, которые вы не тестировали.
Изменение стилей с учетом размеров экрана
Этот комментарий /* MAKE LAYOUT RESPONSIVE at 768px FOR IPAD показывает, что вы меняете вещи в соответствии с размерами экрана, это плохая идея.
Почему?Потому что ничто не мешает производителю создать устройство, которое сможет открыть вашу страницу с экраном с разрешением 784px или 800px.И вы проверили, что происходит с ними?Вероятно, нет.
Реальный отзывчивый дизайн меняет стиль элементов, когда они больше не могут поместиться.Если горизонтальное меню имеет минимальную ширину (или начинает сталкиваться с другими элементами в 945 пикселей), вы меняете его на кнопку такой ширины, а не 768 пикселей, потому что это экран iPad.
Идея адаптивного дизайна заключается вне о том, чтобы поместить кнопку меню на мобильный телефон, потому что это тенденция, а потому, что она не подходит.Следуйте этим двум советам, и ваш сайт всегда будет работать для всех.
И будьте осторожны при использовании orientation в ваших @media, таких как Примечания Mozilla :
Примечание : эта функция не соответствует ориентации устройства .Открытие программной клавиатуры на многих устройствах в портретной ориентации приведет к тому, что область просмотра станет шире, чем она будет высокой, в результате чего браузер будет использовать альбомные стили вместо портретного.