Я создаю сайт с материализацией css.
Стандартное навигационное меню для мобильных устройств на перерывах материализации на мобильных устройствах для более длинных записей.По сути, слова будут перенесены на следующую строку и перекрывают слова под ней, отображая encrypt-o-jumble.
Я пошел и добавил специальные медиазапросы, обычно отформатированные так.
@media screen and (max-width: 870px) {
.xp-1 {
min-height: 100px;
}
}
Я проверил их в браузере Chrome, и они отлично реагируют.
Когда я просматриваю один и тот же сайт на любом телефоне или в браузере Chrome телефон просматривает медиазапросы, которые активируются, как если бы они были на меньшем экране.Таблетки, как правило, достаточно большие, чтобы не вызывать медиа-запросов.
Например: при 375 пикселей на рабочем столе строка будет перенесена на строку ниже.С помощью медиазапросов этот элемент будет расширяться, толкая элемент ниже и создавая достаточно места для всей ссылки.
При просмотре на iPhone размером 375 пикселей x элемент будет расширяться, но текст будет уменьшаться, оставляя пустое пространство.
Я попытался добавить несколько разных метатегов:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Вот несколько снимков экрана меню: В представлении iPhone X Chome (375 пикселей):
Обычный браузер Chromeview на 375px:
Вот ссылка на действующий сайт: https://onesourcebenefits.com/
Как я могу сделать это отображение на мобильном устройстве таким же, как в браузере?
Я прочитал тонну информации на этом сайте и продолжаю изучать это.Любая помощь будет оценена.:)